Menü
Web 浏览器游戏开发原则。框架选择、WebGPU、优化、PWA。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
务实的编码标准—— 简洁、直接、不做过度设计、不写无用注释（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] 推荐 |
|---|---|
| 一次性加载所有资产 | 渐进式加载 |
| 忽略标签页可见性 | 隐藏时暂停 |
| 阻塞在音频加载上 | 懒加载音频 |
| 跳过压缩 | 压缩一切 |
| 假设快速连接 | 处理慢速网络 |
记住： 浏览器是最易访问的平台。尊重它的限制。