Agent Skills
› fanfan-de/anybox
› web-game-foundations
web-game-foundations
GitHub用于在实现前确立网页游戏架构，明确引擎选择、模拟与渲染边界、输入模型及资产规范。适用于未定技术栈或需统一框架的场景，强调解耦仿真与渲染，默认推荐Phaser/Three.js/R3F等引擎。
Trigger Scenarios
用户未确定游戏引擎或渲染器
需要定义模块边界、状态所有权或资产策略
多个专业技能需要统一的架构框架
Install
npx skills add fanfan-de/anybox --skill web-game-foundations -g -y
SKILL.md
Frontmatter
{
"name": "web-game-foundations",
"description": "Set browser-game architecture before implementation. Use when the user needs engine choice, simulation and render boundaries, input model, asset organization, or save\/debug\/performance strategy."
}
Web Game Foundations
Overview
Use this skill to establish the non-negotiable architecture before implementation starts. Browser games degrade quickly when simulation, rendering, UI, asset loading, and input handling are mixed together.
Default rule: simulation state is owned outside the renderer, browser UI is not forced into the canvas unless there is a clear reason, and shipped 3D assets default to GLB or glTF 2.0 rather than ad hoc model formats.
Use This Skill When
- the user has not settled the engine or renderer choice
- the task is about boundaries, module shape, state ownership, or asset policy
- multiple specialist skills need one shared architectural frame
Do Not Stay Here When
- the runtime track is clearly Phaser
- the runtime track is clearly vanilla Three.js
- the runtime track is clearly React Three Fiber
- the task is purely about shipped 3D assets
Once the stack is clear, hand off to the runtime or asset specialist skill.
Architecture Rules
- Separate simulation from rendering.
- Simulation owns entities, turns, timers, collisions, progression, and saveable state.
- The renderer owns scene composition, animation playback, camera, particles, and input plumbing.
- Keep input mapping explicit.
- Define actions such as
move,confirm,cancel,ability-1, andpause. - Map physical inputs to actions in one place.
- Define actions such as
- Treat asset loading as a first-class system.
- Use stable manifest keys.
- Group by domain: characters, environment, UI, audio, FX.
- For 3D content, standardize on GLB or glTF 2.0 unless the chosen engine ecosystem requires another format upstream.
- Define save/debug/perf boundaries up front.
- Save serializable simulation state, not renderer objects.
- Keep debug overlays and perf probes easy to toggle.
- Use DOM overlays for menus and HUD by default.
- Canvas or WebGL should handle the playfield.
- DOM should handle text-heavy HUD, menus, settings, and accessibility-sensitive controls.
- In 3D, keep the persistent UI budget small so the scene stays readable and interactive.
- Lock 3D runtime conventions early.
- Choose consistent units, origins, pivots, and naming conventions.
- Decide how collision proxies, LODs, and baked lighting data are authored before runtime integration starts.
Engine Selection
- Default to Phaser for 2D games with sprites, tilemaps, top-down or side-view action, turn-based grids, and classic browser arcade flows.
- Default to vanilla Three.js for explicit 3D scenes that want direct scene, camera, renderer, and loop control in plain TypeScript or Vite.
- Default to React Three Fiber when the 3D scene lives inside a React application and needs declarative composition, shared app state, or React-first UI coordination.
- Use raw WebGL only for shader-heavy or renderer-first projects where engine abstractions would get in the way.
- Keep Babylon.js and PlayCanvas as alternative-engine paths rather than the default code-generation target.
See ../../references/engine-selection.md for the default decision table.
Implementation Checklist
Define these before writing core code:
- Player fantasy and primary verbs
- Core loop and loss or reset states
- Camera model
- Input action map
- Simulation modules
- Renderer modules
- Asset manifest layout
- 3D asset format and optimization rules
- HUD and menu surfaces
- Save data boundary
- Debug and perf surfaces
Anti-Patterns
- Mixing gameplay rules directly into scene callbacks
- Treating the renderer as the source of truth for game state
- Putting all HUD and menu UI into the canvas by default
- Letting asset filenames become the public API instead of manifest keys
- Shipping unoptimized 3D assets straight from the DCC tool into the browser
- Mixing camera-control state and menu or modal state without an explicit input boundary
- Rebuilding architecture every time the game changes genre
References
- Engine selection:
../../references/engine-selection.md - Phaser structure:
../../references/phaser-architecture.md - Three.js structure:
../../references/three-webgl-architecture.md - Three.js ecosystem stack:
../../references/threejs-stack.md - React Three Fiber stack:
../../references/react-three-fiber-stack.md - 3D asset shipping:
../../references/web-3d-asset-pipeline.md
Version History
- 08dc189 Current 2026-07-05 18:59
