想做 H5 小游戏?这几个 Agent Skills 仓库我翻了一圈 0 次阅读

先说一句,H5 游戏和“游戏”是两码事

游戏开发的 Skills 仓库,大部分是给 Godot、Unity、Unreal 准备的。你在里面能翻到几万星的引擎专项技能,但打开一看,project.godot、*.uproject,跟浏览器没半点关系。

H5 游戏的技能包得满足另一套条件:运行时是浏览器,构建是 Vite/TypeScript,验证是 Playwright 截图,发布是静态文件。这四件事凑齐了,才算真正能干 H5 的活。

下面这几个,是我按这个标准筛出来的。

awesome-gamedev-agent-skills —— 当黄页用,别当万能药

目前游戏方向体量最大的聚合包,6k 星上下,Apache-2.0,77 个 Skill 加一个路由器。覆盖的 Web 引擎包括 Phaser、PixiJS、three.js,还有 Defold、Roblox 这些。

它的核心卖点是路由:你不需要自己选 skill,安装一次,路由器从项目文件里认出引擎,再根据你的请求只加载匹配的那一两个。比如让 Phaser 角色加个二段跳,它只拉 phaser-* 相关的东西,不会把 Godot 的 16 个技能全塞进上下文。

安装就一条命令:

1
npx skills add gamedev-skills/awesome-gamedev-agent-skills

但有一个必须提前知道的问题:覆盖不均。Godot 那边有十几个技能,Phaser、PixiJS、three.js 分到的份额明显薄一些。它适合当“我的引擎有没有被覆盖到”的检查表,真要深入 H5 的某个具体环节,还得往下找垂直包。

threejs-game-skills —— 九件套,导演负责喊人

如果你做的是 Three.js 的 3D 浏览器游戏,这个仓库是目前我翻到的“交付完整度”最高的之一,1.8k 星左右,MIT。

结构很有意思:九个自包含的 SKILL.md,外加一个 threejs-game-director 做路由。你只需要调导演,它根据你当前在哪个阶段,自动加载对应的专家——玩法循环、AAA 画面、HUD、资产生成(Tripo / Gemini / ElevenLabs,全部可选)、调试、Playwright QA。

最戳我的是它的证据契约:请求“release-ready”的时候,光说“做完了”不算,得有构建产物、浏览器截图、canvas 像素、viewport 尺寸、bot playtest 记录。README 里有一句我印象很深:小 HUD 修不必跑全量发布审计,但改了什么、要什么证据,是按改动范围缩放的。

适合的场景很明确:你不是在写 demo,你是想真的把一个小体量 Three.js 游戏推到能给人玩的程度。

ohmygame —— 和 threejs-game-skills 互补的“另一条腿”

WhiteTowerAI 的 ohmygame,426 星,体量不大,但技能切得很细。十条技能里,H5 相关的占了绝大多数:

· Phaser 2D:TypeScript + Vite,场景、相机、输入、DOM overlay 全覆盖
· Plain Three.js:GLB 资产、物理、DOM HUD、WebGL 诊断
· React Three Fiber:React 托管 3D,共享状态和 DOM UI 协调
· 2D 精灵流水线:生成、归一化、atlas、游戏内预览
· GLB/glTF 流水线:变换、材质、纹理、碰撞、LOD、运行时校验
· 浏览器游戏 QA:从启动、输入、玩法状态到截图的结构化测试

和 threejs-game-skills 的区别在于:后者是“导演带着走完整流程”,ohmygame 更像“我缺哪块就调哪块”。如果你不需要一个总监盯着你,只想让 Agent 在 Phaser 里把精灵图集整明白,这个更顺手。

web-game-development-skills —— 名字最直白,路子也最对 H5

仓库名已经把答案写在脸上了:AI Agent Skills for developing H5 / Web / browser games。

它是一个单 Skill 包,但 SKILL.md 内部做了技术路线选择:在 2D Phaser、vanilla Three.js、React Three Fiber 之间做选型,然后往下分到架构、运行时、UI/HUD、2D/3D 资产、浏览器 QA 各环节。

我比较认这一点:它没有假装自己什么都懂,而是先逼你把路线定了。H5 游戏最怕的就是引擎和框架混着来,Phaser 的实体系统跟 React 的状态管理搅在一起,后面改一个 bug 能牵出三个。它把“模拟逻辑和渲染层分离”写进了 Skill 里,算是一开始就把坑标出来了。

另外它是中文 README,装法也最朴素——把 Skill 目录复制到 Agent 的 skills 目录就行,没有强制 npm 步骤。

引擎官方的,和引擎社区自己长的

PixiJS

有官方技能包 pixijs/pixijs-skills,350 星左右,专门教 Agent 正确使用 PixiJS v8 的 WebGL/WebGPU/Canvas 渲染。装法:

1
npx skills add https://github.com/pixijs/pixijs-skills

Phaser

没有看到单一“官方 skills 仓库”的强信号,但社区里做 Phaser + Agent Skills 的教程项目不少。chongdashu/phaserjs-oakwoods 是一个带 YouTube 教程的 RPG 平台跳跃 demo,仓库里直接放了两个 Skill:phaser-gamedev 和 playwright-testing,Claude Code 和 Codex CLI 各一份。想学“一个最小可玩的 Phaser 技能长什么样”,直接扒它的 SKILL.md 比看文档快。

Cocos Creator

这条线比较散,但确实有人在认真做。有覆盖 3.8.x/COCOS 4 的 Agent Skill 包,也有把灰屏、场景损坏、CLI 构建失败、组件绑定异常整理成 17 个调试技能的仓库。Cocos 在国内 H5 小游戏圈子的分量不用我说,这个方向后续大概率会继续长。

选哪个,我的粗暴结论

· 想先看看游戏 Skills 都有什么 → awesome-gamedev-agent-skills,当目录翻,别指望它把 H5 喂到嘴边
· Three.js 3D 小游戏,想走到“能给人玩” → threejs-game-skills,导演 + 证据链,最像正经交付
· Phaser / R3F / 精灵资产 / 浏览器 QA 缺哪补哪 → ohmygame
· 只想让 Agent 按 H5 的路子来,先选型再动手 → web-game-development-skills
· 用 PixiJS → 官方 pixijs/pixijs-skills
· 用 Cocos Creator → 搜 cocos-creator 相关 Agent Skill,调试类的反而比“开发指导”更实用

最后泼一点冷水

Skills 能让 Agent 少写错 API、少跳步骤、少在“我觉得做完了”的时候停下来,但它不负责让游戏变好玩。

Donchitos/Claude-Code-Game-Studios 那个 29k 星的仓库自己公开过一个数据:多写 29 份文档,买到的是可追溯性,不是更好的游戏。H5 游戏更是这样——操作手感、反馈节奏、一局多长,这些东西 Skill 写得再细,最后也得你自己开浏览器玩两把才知道。

工具帮你把“能跑”的门槛拉低了,“好玩”那一关,还是得自己过。

P.S. 星数都是翻的时候顺手记的,这类仓库涨得比游戏更新还快,看个大概就行。

下一篇 最近翻的几个 Agent Skills 仓库,有些星数离谱到我想笑
感谢您的支持!
微信赞赏码 微信赞赏
支付宝赞赏码 支付宝赞赏