majidmanzarpour/threejs-game-skills

Agent skills for building playable, polished Three.js browser games with gameplay, AAA-style graphics, UI, QA, and optional AI-generated 3D, image, and audio assets.

threejs-game-skills – Three.jsブラウザゲームを構築するAI駆動型スキルパック

何であるか – 大規模言語モデル（LLM）アシスタント、たとえば Codex や Claude Code が、Three.js用のフルスタックゲーム開発者として機能できるようにする エージェントスキル のコレクションです。このパックには、Vite + TypeScriptのスケルトン、ヘルパースクリプト、決定論的なテストフック、および専門スキル（ゲームプレイ、グラフィックス、UI、アセット生成、音声、デバッグ、QA、リリース）を調整する ディレクター スキルがバンドルされています。たとえば「高級なホバーレーシングゲームを構築して」と指示すると、ディレクターは適切なサブスキルを自動的に呼び出し、コードとアセットを生成し、Playwrightベースのスモーク/視覚的レグレッションテストを実行し、リリース準備完了のビルドを生成します。低レベルのThree.jsコードを自分で書く必要はありません。

主なコンポーネント

スキル	役割
threejs-game-director	エントリーポイント；範囲を決定し、他のスキルにルーティングし、プロジェクトノートを保持し、検証プロセスを実行します。
threejs-gameplay-systems	ゲームループ、入力、カメラ、物理、スコアリング、全体的なアーキテクチャをセットアップします。
threejs-aaa-graphics-builder	モデル、マテリアル、照明、VFXを改善し、ビジュアルスコアカードを生成します。
threejs-game-ui-designer	HUD、メニュー、レスポンシブオーバーレイ、タッチエリアの安全チェックを構築します。
threejs-debug-profiler	ランタイムエラー、パフォーマンスボトルネック、モバイル固有のバグを検出します。
threejs-qa-release	プロダクションビルドを生成し、Playwrightスクリーンショット、キャンバスピクセルチェック、ビューポートテストを実行し、リリースリスクレポートを作成します。
threejs-3d-generator	（オプション）Tripo APIを呼び出して、テキストまたは画像からGLB/FBXアセットを生成します。
threejs-image-generator	（オプション）Gemini画像生成を使って、テクスチャ、スカイボックス、UIアートなどを生成します。
threejs-audio-generator	（オプション）ElevenLabsを使ってSFX、音楽ループ、ボイスオーバー/TTSを生成します。

すべてのスキルは skills/ フォルダ内にあり、それぞれ SKILL.md 説明、参考ドキュメント、エージェントが呼び出せるスクリプトを持っています。

インストール

# Codexエージェント用にインストール
npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a codex -g -y

# Claude Codeエージェント用にインストール
npx skills add majidmanzarpour/threejs-game-skills --skill '*' -a claude-code -g -y

skills CLIが -a フラグをサポートしていない場合、リポジトリをクローンしてバンドルされたインストーラーを実行してください：

./install.sh --codex      # Codexスキルのみ
./install.sh --claude     # Claude Codeスキルのみ
./install.sh --all        # 両方

インストーラーは skills/ ディレクトリを適切なエージェントスキル場所にコピーし、重複名は --force が指定されていない限りスキップし、関係のないユーザーのスキルを削除することはありません。

使い方

空のフォルダ（または既存のThree.jsプロジェクト）をLLMエージェントUIで開きます。

自然言語のリクエストをエージェントに提示し、ディレクターのスキル名を指定します。たとえば：

threejs-game-directorを使って、未来志向のタワーデンスゲームをゼロから構築してください。
関連するゲームプレイ、グラフィックス、UI、アセット生成、音声、デバッグ、QAスキルを自動的に使用してください。
まずプレイ可能なループを作成し、ブラウザ、モバイル、視覚的、パフォーマンス、リリースチェックを通過するまで反復します。

ディレクターはスケルトンを読み込み、コアループを作成し、必要に応じてグラフィックス/UI/音声サブスキルを呼び出し、バンドルされたPlaywrightテストを実行し、最終的にビルドログ、スクリーンショット、パフォーマンスメトリクス、アセットIDを含む要約を返します。

同じプロンプトはCodexとClaude Codeの両方で動作します。なぜなら SKILL.md ファイルが共有されているからです。

オプションのAPIキー

コアワークフローは有料サービスなしでも動作します。以下のキーを提供すると、アセット生成スキルが高品質な外部アセットを取得できます：

プロバイダー	スキル	環境変数
Tripo	`threejs-3d-generator`	`TRIPO_API_KEY`
Google Gemini	`threejs-image-generator`	`GEMINI_API_KEY`
ElevenLabs	`threejs-audio-generator`	`ELEVENLABS_API_KEY`

ディレクターには、各キーが設定されているかを報告する小さなプローブスクリプト（probe_asset_credentials.sh）が含まれています。

デモ

ゲーム	動画	実行可能リンク
Neon Ridge Drift	Xで視聴	https://ridgedrift.netlify.app
Championship Snooker Arena	Xで視聴	https://snookerarena.netlify.app
Starship Dogfight	Xで視聴	https://starshipdogfight.netlify.app
Tide Singer	Xで視聴	https://tidesinger.netlify.app
Ripcore	Xで視聴	https://ripcore.netlify.app

各デモはスキルパックによって生成され、ディレクターが最小限の手動コードで完全で洗練されたThree.jsゲームを生成できることを示しています。

証拠と検証

スキルが成功を主張する際には、具体的なアーティファクトを提供しなければなりません。たとえば：

npm run build の出力とプロダクションバンドル。
Playwrightスクリーンショットと視覚的レグレッションのベースライン。
キャンバスピクセルが非空白であることのチェックとレンダリング予算メトリクス（三角形数、描画コール数、テクスチャメモリ）。
グラフィックス変更時のパフォーマンススナップショット。
AAAレベルの主張に対するビジュアルスコアカード（参照アンカーに対して校正済み）。
ゲームプレイループのボットプレイテストメトリクス。
生成された3D/2D/音声アセットへのパス、または資格情報が不足している旨のメモ。

ディレクターの check_evidence.py スクリプトは、これらのアーティファクトをリストアップするマニフェストを検証します。

メンテナンスとテスト

開発者はリポジトリ自身のチェックを実行できます：

npm install
npm run check:scripts
npm run validate:skills
npm run test:helpers

ヘルパースクリプトも手動実行用に公開されています（例：inspect-threejs-canvas.mjs）。

ライセンス

MIT – 使用、変更、再配布が自由です。

TL;DR

threejs-game-skills は、LLMエージェントスキルの即時インストール可能なパックであり、AIアシスタントが完全なThree.jsゲームスタジオとして機能できるようにします。パックをインストールし、ディレクターに何 kind のゲームを望むかを伝えれば、システムはコードとアセットを生成し、自動テストを実行し、リリース準備完了のウェブゲームを提供します。低レベルのThree.jsボイラープレートを自分で書く必要はありません。