web-game-development

Web Game Development

当真正的问题是 “应该由哪个上游 Three.js／浏览器游戏开发技能负责这项任务？如何安装它？” 时，请使用此技能。

这是一个路由包，而非重新实现。19 个实际子技能位于上游 MengTo/Skills。 此处的工作是：

1. 根据 19 个子技能如实分类任务，
2. 选择范围最窄的单一匹配项（只有任务确实跨越了有文档说明的边界时才组合），
3. 如果该子技能尚未在本地安装，则获取它，
4. 按游戏生命周期安排多技能工作顺序，以及
5. 如果本仓库中非 Three.js 技能才是真正的负责方，则转交给它们。

阅读 references/skill-routing-table.md，了解完整的 19 项技能决策表，其中包含基于上游资料的“适用情形”说明和边界注释。 阅读 references/lifecycle-and-handoffs.md，了解原型 → 系统 → 内容 → 资源 → 手感 → 性能 → QA → 发布的顺序，以及各阶段由哪些子技能负责。 在转交给 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 中介绍的引擎专属 Unity／Unreal 技能，例如 game-performance-profiler、game-ci-cd-pipeline、game-build-log-triage）。不要将基于 Three.js 编写的子技能指导应用于 Unity 项目，反之亦然。

何时使用此技能

• 任务是构建、扩展或审查 Three.js／浏览器动作游戏
• 你需要在两个或更多上游游戏开发子技能之间做出选择，但不确定哪个范围最窄
• 任务所需的上游子技能尚未在本地安装
• 你正在安排一个多阶段切片（例如，新增敌人类型涉及内容、骨骼绑定、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。 指出范围最窄的单一子技能。如果两个技能看起来都匹配，请在组合它们之前重新阅读其中的“重要边界”规则——大多数表面上的重叠（敌人系统与怪物骨骼绑定与 AI、战斗与遭遇、混合资源与 Vesperfall 审查与 VFX／音频、可测试版本与发布）实际上各自对应一个技能负责的独立事项。

步骤 2：检查匹配的子技能是否已安装

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

第 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 运行。

第 4 步：按生命周期安排多技能工作

使用 references/lifecycle-and-handoffs.md 安排工作顺序：原型 → 系统 → 内容 → 资源 → 手感 → 性能 → QA → 发布。在底层系统（战斗、遭遇、敌人）定义之前，不要制作 VFX/音频润色；在有可供测试游玩的成果之前，不要发布。

第 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（使用的是 Unity/C#，不是 Three.js），以及 game-build-log-triage（用于排查构建失败）
• 不要在此处应用任何一个 Three.js 子技能（共 19 个）

最佳实践

1. 从最具体的子技能开始；只有在文档明确规定的边界确有需要时，才组合使用技能。
2. 通过 scripts/fetch-upstream-skills.sh 获取子技能，而不是手动复制文件，以确保来源和稀疏检出范围清晰。
3. 绝不编造子技能内容——此技能包只负责路由；获取后，上游的 SKILL.md 才是权威来源。
4. 按生命周期安排工作，确保润色（VFX/音频）不会早于其所传达的系统。
5. 如实转交给 Unity、性能、CI/CD、构建日志、演示反馈、Steam 或精灵图相关技能，不要勉强让此技能包承担这些工作。
6. 在不熟悉的环境中，首次运行获取脚本时默认使用 --dry-run。

参考资料

• 技能路由表
• 生命周期与交接
• 转交说明
• MengTo/Skills 游戏开发系列