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 脚手架、辅助脚本、确定性测试钩子，以及一个导演技能，用于协调专业子技能（游戏玩法、AAA 图形、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 生成音效、音乐循环、语音/文本转语音。

所有技能均位于 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，否则跳过重复名称，且从不删除无关的用户技能。

如何使用

在 LLM 代理 UI 中打开一个空文件夹（或现有 Three.js 项目）。

向代理提出自然语言请求并命名导演技能，例如：

使用 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 游戏工作室。安装该包，告诉导演您想要的游戏类型，系统将自动生成代码、资产，运行自动化测试，并为您提供一个可发布的网页游戏——而无需您编写底层 Three.js 模板代码。