3D Studio は何をしますか？
複数の3Dウェブスキルを1つのワークフローとして実行します。リクエストは $ARGUMENTS にあります。エージェントがそのプレースホルダーを未記入のままにした場合、リクエストはユーザーがこのスキルと一緒に書いた内容です。
1. スキルの選択
以下はそれぞれ個別のスキルです。エージェントがスキルを読み込む方法（Claude CodeのSkillツール、またはCodexやAntigravityで SKILL.md を読み込む方法）で、正確に示された名前で読み込んでください。その指示はこのワークフローと並行して適用されます。セクション4にフォルダの場所を示します。
常にこれら3つを読み込みます： taste-skill（アートディレクション。design-taste-frontend としてインストールされている場合があります）、apple-design（流動的な物理モーション、マテリアル、奥行き）、threejs-fundamentals（シーン、カメラ、レンダラー、ループ）。
リクエストが必要とする場合、次の行を追加します：
| リクエストの内容 | 読み込むスキル |
|---|---|
| 動くものすべて | animate、threejs-animation |
| コードで作られた形状、インスタンシング、多数のオブジェクト | threejs-geometry |
| 表面、木材、金属、光沢 | threejs-materials、threejs-textures |
| 照明、影、反射 | threejs-lighting |
| クリック、ドラッグ、オービット、パーツ選択 | threejs-interaction |
| カスタム視覚効果 | threejs-shaders、threejs-postprocessing |
| 3Dモデルファイルの読み込みまたは圧縮 | threejs-loaders、threejs-asset-pipeline |
| Blenderからのモデリングまたは書き出し | blender-mcp（最初にBlenderがインストールされているか確認） |
| Reactプロジェクト | threejs-react-three-fiber、r3f-fundamentals |
| 動作の遅さ、カクつき、真っ白なキャンバス、メモリ不足 | threejs-performance、threejs-debug-profiler |
| 等角図、図解、仕組みを説明するダイアグラム、またはA4の印刷用ポスター | anatomy |
| レンダリングされた映像または動画 | Remotion（セクション3を参照） |
これらのスキルを合わせると数千行に及び、すべてを読み込むとビルドに必要な作業メモリを消費します。そのため、テーブル方式がデフォルトです。
--allを指定すると、リクエストに関係なくテーブル内のすべてのスキルを読み込みます。--planを指定すると、読み込むスキルとその理由を一覧表示し、それ以上は読み込まずに停止します。
読み込むスキルを1行で述べてください。スキルが読み込めない場合は、その名前を挙げて、停止せずに他のスキルで続行してください。
このワークフローが必要とするタイミングで各スキルを読み込んでください。スキルがセットアップ手順で始まる場合、または作業を中断するような挨拶を求める場合は、その部分をスキップしてください。
2. この順序で作業を進める
- アイデアを決定する。
taste-skillに従ってアートディレクションを決定します。ブリーフを読み、方向性を描き、コピーを書きます。アイデアは主題から来るべきです。 - ロジックを3Dから分離する。 実際のルール（算術、シミュレーション、価格設定）を持つものはすべて、Three.jsを使わないプレーンなモジュールに記述し、テストでカバーすることで、レンダリングなしでも信頼できるようにします。
- 3Dを状態の関数として構築する。 ジオメトリコードはポーズからパーツを配置し、ルールについて知りません。モーションは進行度の純粋関数であるべきで、逆再生、途中で逆転、またはモーション軽減のために最後にジャンプすることができるようにします。
- オンデマンドでレンダリングする。 何かが動いたときだけ描画し、画面外ではまったく描画しないことで、アイドル状態のページはコストがかからず、スマートフォンは冷却状態を保ちます。
- 完全に使用可能にする。 キャンバスの横に実際のボタン、キーボード操作、モーション軽減、WebGLがない場合のフォールバック、スマートフォン幅で動作するレイアウトが必要です。
3. Remotion
このセットにはRemotionスキルは含まれていないため、プロジェクトで直接 remotion パッケージを使用してください。
- サイトが使用しているのと同じシーン構築コードをインポートしてレンダリングすることで、映像とサイトが乖離しないようにします。
- 各フレームはフレーム番号の純粋関数でなければなりません。以前のフレームに依存するタイマーやスプリングは使用しないでください。
- レンダリングは
remotion render <entry> <composition> <out.mp4> --gl=angle --codec=h264 --crf=24で行います。 - シーンを変更しても、すでにレンダリングされた映像は変わりません。再レンダリングするか、ユーザーに古くなっていることを伝えてください。
4. 完了と呼ぶ前に確認する
確認は2つのスキル内のスクリプトを使用します。各スキルのフォルダは、プロジェクト内の .claude/skills/ と .agents/skills/、次に ~/.claude/skills/、~/.agents/skills/、~/.gemini/config/skills/ の順で名前を探して見つけてください。以下、<anatomy> と <taste> はそれらのフォルダを示します。<taste> は taste-skill または design-taste-frontend のいずれかの名前です。
node <anatomy>/scripts/drive.mjs <url> --actions steps.json を使用して、実際のブラウザを実際のクリックとドラッグで操作します。どちらのスクリプトもNode 22以降と、インストールされたChrome、Edge、またはChromiumが必要です。
- 静止画とフローは別個の実行です。
shotアクションは、次のキャプチャまでアニメーションを停止できます。--reducedを使用して静止画を撮影すると最終状態にジャンプし、アニメーションフローはevalチェックを使用して実行の途中でスクリーンショットを撮らずにテストします。フレームが空白または古くなった場合は、バグとして扱う前に再度撮影してください。 - 実際のコントロールをテストする。 状態を直接設定するよりも実際のボタンをクリックすることを優先し、アニメーションの中間での逆転と中断を含めてください。
- デザインを確認する。
node <taste>/scripts/inspect.mjs <url> --widths 1440,390を実行し、その後自分でスクリーンショットを確認してください。インスペクターに合格することは最低条件であり、評価ではありません。 - テストを実行し、コンソールを読む。 その後、開発サーバーだけでなく、プロダクションビルドでもメインフローを繰り返してください。
何を確認したか、そして率直に何を確認しなかったか（実際のデバイス、サウンド、フルスピードで見たモーションは通常ここでは手の届かない範囲です）を報告してください。
5. 新しいもののインストール
テーブル内のスキルが不足している場合、ユーザーは npx github:mithulpranav24012008/3d-studio でセット全体をインストールできます。タスクに必要なその他のスキルやツールについては、ユーザーにコマンドを渡して実行してもらい、セキュリティサマリーを確認できるようにしてください。確認をスキップするために -y を使用しないでください。