web-game-development

Web ゲーム開発

**「このタスクを担当すべき Three.js／ブラウザー向けゲーム開発スキルはどれで、どうインストールすればよいか」**が本当の質問である場合に、このスキルを使用します。

これはルーティング用パックであり、再実装ではありません。実際の 19 個のサブスキルは、上流の MengTo/Skills にあります。ここでの役割は次のとおりです。

1. 19 個のサブスキルに照らして、タスクを正確に分類する
2. 最も範囲の狭いものを 1 つ選ぶ（タスクが明確な境界をまたぐ場合に限り、組み合わせる）
3. そのサブスキルがまだインストールされていなければ、ローカルに取得する
4. 複数スキルにまたがる作業を、ゲームのライフサイクルに沿って順序付ける
5. 実際の担当がこのリポジトリの Three.js 以外のスキルである場合は、そちらへ案内する

上流に根拠を置く「使用する場面」の説明と境界に関する注記を含む、19 個のスキルの完全な判断表については、references/skill-routing-table.md をお読みください。 プロトタイプ → システム → コンテンツ → アセット → 操作感 → パフォーマンス → QA → リリースの順序と、各段階を担当するサブスキルについては、references/lifecycle-and-handoffs.md をお読みください。 unity-gamedev-skill-pack、game-performance-profiler、game-ci-cd-pipeline、game-build-log-triage、game-demo-feedback-triage、steam-store-launch-ops、または perfectpixel へ案内する前に、references/route-outs.md をお読みください。

unity-gamedev-skill-pack との明確な境界

unity-gamedev-skill-pack は、外部の Unity／C# スキルパック（Addressables、Cinemachine、GAS、VContainer、UniTask、Wwise）を厳選しています。このスキルである web-game-development は、Three.js／ブラウザー向けゲーム開発のファミリーへ案内します。エンジンが Unity または Unreal の場合は、ここで止めて unity-gamedev-skill-pack を使用してください（または、references/route-outs.md で説明している game-performance-profiler、game-ci-cd-pipeline、game-build-log-triage など、エンジン固有の Unity／Unreal スキルを使用してください）。Three.js 向けに作成されたサブスキルのガイダンスを Unity プロジェクトに適用したり、その逆を行ったりしないでください。

このスキルを使用する場面

• Three.js／ブラウザー向けアクションゲームの構築、拡張、監査を行う場合
• 上流のゲーム開発サブスキルを 2 つ以上から選ぶ必要があり、どれが最も範囲の狭いスキルかわからない場合
• タスクに必要な上流のサブスキルが、まだローカルにインストールされていない場合
• 複数段階にわたる作業（例：コンテンツ、リグ、AI、戦闘、VFX の各スキルに関わる新しい敵タイプ）を順序付ける必要がある場合
• 代わりに Unity、汎用パフォーマンス、CI/CD、ビルドログ、デモへのフィードバック、Steam マーケティング、またはスプライト生成のスキルへ適切に案内する必要がある場合

このスキルを使用しない場面

• エンジンが Unity または Unreal の場合 → unity-gamedev-skill-pack を使用してください（または references/route-outs.md にある Unity／Unreal 固有のスキルを使用してください）
• タスクがゲームプレイではなく、汎用的な Web アプリのパフォーマンスに関する場合 → game-performance-profiler のゲーム以外向けの姉妹スキル、または一般的なパフォーマンススキルを使用してください
• CI/CD の設計、または失敗したビルドログの診断を行う場合 → game-ci-cd-pipeline または game-build-log-triage を使用してください
• プレイテスト／デモへのフィードバックを、修正項目のリストに整理する場合 → game-demo-feedback-triage を使用してください
• Steam のストアページ、お気に入り登録、またはローンチ時期の戦略に関する場合 → steam-store-launch-ops を使用してください
• テキストプロンプトから 2D ピクセルアートのスプライトシートを生成する場合 → perfectpixel を使用してください

手順

ステップ 1: 19 スキルの判断表に照らしてリクエストを分類する

references/skill-routing-table.md を使用してください。 最も範囲の狭いサブスキルを 1 つ選んでください。2 つのスキルが当てはまるように思える場合は、組み合わせる前に、そこで説明されている「重要な境界」のルールを読み直してください。一見重複しているものの大半（敵システムとモンスターリグと AI、戦闘と遭遇、ハイブリッドアセットと Vesperfall のレビューと VFX／オーディオ、テストプレイ可能な状態と出荷可能な状態）は、実際にはそれぞれのスキルが異なる関心事を担当しています。

ステップ 2: 該当するサブスキルがインストール済みか確認する

ls "${SKILLS_ROOT:-$HOME/.agents/skills}" | grep -x "<matched-skill-name>" || echo "not installed"

Step 3: 不足している場合はサブスキルを取得する

scripts/fetch-upstream-skills.sh を使用します。このスクリプトは https://github.com/MengTo/Skills.git から agent-skills/game-development のみをスパースチェックアウトし、要求されたサブスキルのフォルダーを ${SKILLS_ROOT:-$HOME/.agents/skills} にコピーします。既存のファイルは削除しません。

scripts/fetch-upstream-skills.sh --skill build-threejs-enemy-systems --skill tune-enemy-ai

または、ファミリー全体を取得します。

scripts/fetch-upstream-skills.sh --all

結果が不確かな場合は、必ず最初に --dry-run を実行してください。

Step 4: 複数スキルの作業をライフサイクルに沿って順序づける

references/lifecycle-and-handoffs.md を使用して、作業の順序を決めます：プロトタイプ → システム → コンテンツ → アセット → 感触 → パフォーマンス → QA → リリース。基盤となるシステム（戦闘、エンカウンター、敵）が定義される前にVFXやオーディオを仕上げないでください。また、テストプレイ可能な状態であることが証明される前にリリースしないでください。

Step 5: このパックが適切な担当でない場合は、正直に別の担当へ引き継ぐ

references/route-outs.md を使用してください。引き継ぐ前に、対象スキル名と理由を一行で伝えます。

出力形式

短い ルーティングパケット を返します。

## Routing packet
- Matched sub-skill(s): <name(s)>
- Why this is narrowest: <one line, grounded in the routing table>
- Installed? <yes/no> — fetch command if no
- Lifecycle stage: <prototype|systems|content|assets|feel|perf|qa|release>
- Route-out (if any): <skill name + reason>

例

例 1: 新しい敵タイプを最初から最後まで作成する

入力

Three.js の ARPG に、独自のムーブセット、リグ、AI の挙動、インパクト VFX を備えた新しい遠距離攻撃型の敵アーキタイプを追加してください。

出力の概要

• 該当するサブスキル：build-threejs-enemy-systems（コンテンツ／ムーブセットの契約） → build-game-monster-system（リグ／ソケット／コライダーの適合性）→ tune-enemy-ai（知覚／意図／攻撃の選択）→ create-game-vfx （インパクトのフィードバック）
• 境界に関する注記：enemy-systems は移植可能なコンテンツを担当し、monster-system はリグの適合性を担当し、tune-enemy-ai は挙動を担当します。いずれも他のスキルの代わりにはなりません。
• ライフサイクルの段階：システム → コンテンツ → 感触

例 2: モバイル HUD のリグレッション

入力

インベントリのドラッグ＆ドロップがタッチ操作で動作せず、縦向きでは HUD がアクションボタンに重なっています。

出力の概要

• 該当するサブスキル：build-mobile-threejs-games（タッチ／HUD／画面の向き）、 build-game-inventory（ドラッグ＆ドロップ、ドラッグ以外の代替操作）
• ライフサイクルの段階：コンテンツ／感触、その後 QA
• 別の担当への引き継ぎ：なし — このパックの範囲内です

例 3: Unity プロジェクトが誤ってここにルーティングされた場合

入力

Unity の Addressables ビルドが Steam リリース前に何度も失敗します。修正してください。

出力の概要

• 別の担当への引き継ぎ：unity-gamedev-skill-pack（エンジンは Three.js ではなく Unity/C#）および、ビルドの失敗については game-build-log-triage
• ここでは 19 個の Three.js サブスキルをいずれも適用しないでください

ベストプラクティス

1. まず最も範囲の狭いサブスキルを使い、文書化された境界上の理由がある場合に限ってスキルを組み合わせます。
2. ファイルを手動でコピーするのではなく、scripts/fetch-upstream-skills.sh を通じてサブスキルを取得してください。これにより、出所とスパースチェックアウトの範囲を明確に保てます。
3. サブスキルの内容を決して捏造しないでください。このパックはルーティングのみを担当します。取得後は、上流の SKILL.md が信頼できる情報源です。
4. 作業をライフサイクルに沿って順序づけ、伝える対象となるシステムより先に仕上げ（VFX／オーディオ）が行われないようにします。
5. このパックの範囲を無理に広げず、Unity、パフォーマンス、CI/CD、ビルドログ、デモのフィードバック、Steam、またはスプライトのスキルへ正直に引き継ぎます。
6. 慣れていない環境でフェッチスクリプトを初めて実行する際は、最初に --dry-run を実行してください。

参考資料

• スキルルーティング表
• ライフサイクルと引き継ぎ
• 別の担当への引き継ぎ
• MengTo/Skills game-development ファミリー