Menu
Web 浏览器游戏开发原则。框架选择、WebGPU、优化、PWA。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
务实的编码标准—— 简洁、直接、不做过度设计、不写无用注释（Pragmatic coding standards）
性能分析原则。测量、分析与优化技术。
API design principles and decision-making（API 设计原则与决策逻辑）。REST vs GraphQL vs tRPC selection（选择）、response formats（响应格式）、versioning（版本控制）、pagination（分页）。
App Builder（应用构建编排器）主编排器。根据自然语言请求创建全栈应用，确定项目类型、选择技术栈并协调智能体。
Project scaffolding templates（项目脚手架模板）。用于从零创建新项目。包含 12 个技术栈模板。
Architectural decision-making framework（架构决策框架）。Requirements analysis（需求分析）、trade-off evaluation（权衡评估）、ADR documentation（架构决策记录）。Use when making architecture decisions or analyzing system design（用于架构决策与系统设计分析）。
| name | web-games |
| description | Web 浏览器游戏开发原则。框架选择、WebGPU、优化、PWA。 |
| allowed-tools | Read, Write, Edit, Glob, Grep |
框架选择与浏览器特定原则。
什么类型的游戏？
|
+-- 2D 游戏
| +-- 完整的游戏引擎功能？ -> Phaser
| +-- 原始渲染能力？ -> PixiJS
|
+-- 3D 游戏
| +-- 完整引擎（物理、XR）？ -> Babylon.js
| +-- 渲染聚焦？ -> Three.js
|
+-- 混合 / Canvas
+-- 自定义 -> Raw Canvas/WebGL
| 框架 | 类型 | 最适合 |
|---|---|---|
| Phaser 4 | 2D | 完整游戏功能 |
| PixiJS 8 | 2D | 渲染、UI |
| Three.js | 3D | 可视化、轻量级 |
| Babylon.js 7 | 3D | 完整引擎、XR |
| 浏览器 | 支持 |
|---|---|
| Chrome | [OK] 自 v113 起 |
| Edge | [OK] 自 v113 起 |
| Firefox | [OK] 自 v131 起 |
| Safari | [OK] 自 18.0 起 |
| 总计 | ~73% 全球 |
navigator.gpu| 限制 | 策略 |
|---|---|
| 无本地文件访问 | 资产打包、CDN |
| 标签页节流 | 隐藏时暂停 |
| 移动数据限制 | 压缩资产 |
| 音频自动播放 | 需要用户交互 |
| 类型 | 格式 |
|---|---|
| 纹理 | KTX2 + Basis Universal |
| 音频 | WebM/Opus（回退：MP3） |
| 3D 模型 | glTF + Draco/Meshopt |
| 阶段 | 加载 |
|---|---|
| 启动 | 核心资产，<2MB |
| 游戏过程 | 按需流式传输 |
| 后台 | 预取下一关 |
| [FAIL] 禁止 | [OK] 推荐 |
|---|---|
| 一次性加载所有资产 | 渐进式加载 |
| 忽略标签页可见性 | 隐藏时暂停 |
| 阻塞在音频加载上 | 懒加载音频 |
| 跳过压缩 | 压缩一切 |
| 假设快速连接 | 处理慢速网络 |
记住： 浏览器是最易访问的平台。尊重它的限制。