How do I install the Web Games skill?

Run npx skillmds@latest add misonl/web-games in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Web Games skill do?

Web 浏览器游戏开发原则。框架选择、WebGPU、优化、PWA。 It is listed under Coding & Dev Tools on SkillMD.

Is Web Games safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Web Games?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Web Games free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Web Games?

misonl (@misonl) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Web Games by misonl — Agent Skill

Name: Web Games
Author: misonl

File contents

Web 浏览器游戏开发

框架选择与浏览器特定原则。

1. 框架选择

决策树

什么类型的游戏？
|
+-- 2D 游戏
|   +-- 完整的游戏引擎功能？ -> Phaser
|   +-- 原始渲染能力？ -> PixiJS
|
+-- 3D 游戏
|   +-- 完整引擎（物理、XR）？ -> Babylon.js
|   +-- 渲染聚焦？ -> Three.js
|
+-- 混合 / Canvas
    +-- 自定义 -> Raw Canvas/WebGL

对比（2025）

框架	类型	最适合
Phaser 4	2D	完整游戏功能
PixiJS 8	2D	渲染、UI
Three.js	3D	可视化、轻量级
Babylon.js 7	3D	完整引擎、XR

2. WebGPU 采用

浏览器支持（2025）

浏览器	支持
Chrome	[OK] 自 v113 起
Edge	[OK] 自 v113 起
Firefox	[OK] 自 v131 起
Safari	[OK] 自 18.0 起
总计	~73% 全球

决策

新项目：使用 WebGPU，并提供 WebGL 回退
遗留支持：从 WebGL 开始
特性检测：检查 navigator.gpu

3. 性能原则

浏览器限制

限制	策略
无本地文件访问	资产打包、CDN
标签页节流	隐藏时暂停
移动数据限制	压缩资产
音频自动播放	需要用户交互

优化优先级

资产压缩 - KTX2、Draco、WebP
懒加载 - 按需加载
对象池 - 避免 GC
绘制调用合批 - 减少状态变更
Web Workers - 卸载繁重计算

4. 资产策略

压缩格式

类型	格式
纹理	KTX2 + Basis Universal
音频	WebM/Opus（回退：MP3）
3D 模型	glTF + Draco/Meshopt

加载策略

阶段	加载
启动	核心资产，<2MB
游戏过程	按需流式传输
后台	预取下一关

5. 游戏的 PWA

优势

离线游玩
安装到主屏幕
全屏模式
推送通知

要求

Service worker 用于缓存
Web app manifest
HTTPS

6. 音频处理

浏览器要求

音频上下文需要用户交互
在首次点击/轻触时创建 AudioContext
如果挂起则恢复上下文

最佳实践

使用 Web Audio API
池化音频源
预加载常用声音
使用 WebM/Opus 压缩

7. 反模式

[FAIL] 禁止	[OK] 推荐
一次性加载所有资产	渐进式加载
忽略标签页可见性	隐藏时暂停
阻塞在音频加载上	懒加载音频
跳过压缩	压缩一切
假设快速连接	处理慢速网络

记住： 浏览器是最易访问的平台。尊重它的限制。

---name: web-gamesdescription: Web 浏览器游戏开发原则。框架选择、WebGPU、优化、PWA。---# Web 浏览器游戏开发> 框架选择与浏览器特定原则。---## 1. 框架选择### 决策树```什么类型的游戏？|+-- 2D 游戏| +-- 完整的游戏引擎功能？ -> Phaser| +-- 原始渲染能力？ -> PixiJS|+-- 3D 游戏| +-- 完整引擎（物理、XR）？ -> Babylon.js| +-- 渲染聚焦？ -> Three.js|+-- 混合 / Canvas +-- 自定义 -> Raw Canvas/WebGL```### 对比（2025）| 框架 | 类型 | 最适合 || --- | --- | --- || **Phaser 4** | 2D | 完整游戏功能 || **PixiJS 8** | 2D | 渲染、UI || **Three.js** | 3D | 可视化、轻量级 || **Babylon.js 7** | 3D | 完整引擎、XR |---## 2. WebGPU 采用### 浏览器支持（2025）| 浏览器 | 支持 || --- | --- || Chrome | [OK] 自 v113 起 || Edge | [OK] 自 v113 起 || Firefox | [OK] 自 v131 起 || Safari | [OK] 自 18.0 起 || **总计** | **~73%** 全球 |### 决策- **新项目**：使用 WebGPU，并提供 WebGL 回退- **遗留支持**：从 WebGL 开始- **特性检测**：检查 `navigator.gpu`---## 3. 性能原则### 浏览器限制| 限制 | 策略 || --- | --- || 无本地文件访问 | 资产打包、CDN || 标签页节流 | 隐藏时暂停 || 移动数据限制 | 压缩资产 || 音频自动播放 | 需要用户交互 |### 优化优先级1. **资产压缩** - KTX2、Draco、WebP2. **懒加载** - 按需加载3. **对象池** - 避免 GC4. **绘制调用合批** - 减少状态变更5. **Web Workers** - 卸载繁重计算---## 4. 资产策略### 压缩格式| 类型 | 格式 || --- | --- || 纹理 | KTX2 + Basis Universal || 音频 | WebM/Opus（回退：MP3） || 3D 模型 | glTF + Draco/Meshopt |### 加载策略| 阶段 | 加载 || --- | --- || 启动 | 核心资产，<2MB || 游戏过程 | 按需流式传输 || 后台 | 预取下一关 |---## 5. 游戏的 PWA### 优势- 离线游玩- 安装到主屏幕- 全屏模式- 推送通知### 要求- Service worker 用于缓存- Web app manifest- HTTPS---## 6. 音频处理### 浏览器要求- 音频上下文需要用户交互- 在首次点击/轻触时创建 AudioContext- 如果挂起则恢复上下文### 最佳实践- 使用 Web Audio API- 池化音频源- 预加载常用声音- 使用 WebM/Opus 压缩---## 7. 反模式| [FAIL] 禁止 | [OK] 推荐 || --- | --- || 一次性加载所有资产 | 渐进式加载 || 忽略标签页可见性 | 隐藏时暂停 || 阻塞在音频加载上 | 懒加载音频 || 跳过压缩 | 压缩一切 || 假设快速连接 | 处理慢速网络 |---> **记住：** 浏览器是最易访问的平台。尊重它的限制。

Frequently asked questions

Web Games