Game Studio
Overview
Use this skill as the umbrella entrypoint for browser-game work. Default to a 2D Phaser path unless the user explicitly asks for 3D, Three.js, React Three Fiber, shader-heavy rendering, or another WebGL-first direction.
This plugin is intentionally asymmetric:
- 2D is the strongest execution path in v1.
- 3D has one opinionated default ecosystem: vanilla Three.js for plain TypeScript or Vite apps, React Three Fiber for React-hosted 3D apps, and GLB or glTF 2.0 as the default shipping asset format.
- Shared architecture, UI, and playtest practices apply to both.
Use This Skill When
- the user is still choosing a stack
- the request spans multiple domains such as runtime, UI, asset pipeline, and QA
- the user says "help me build a game" without naming the implementation path
Do Not Stay Here When
- the runtime is clearly plain Three.js
- the runtime is clearly React Three Fiber
- the task is clearly a shipped-asset problem
- the task is clearly frontend-only or QA-only
Once the intent is clear, route to the most specific specialist skill and continue from there.
Routing Rules
- Classify the request before designing or coding:
2D default: Phaser, sprites, tilemaps, top-down, side-view, grid tactics, action platformers.3D + plain TS/Vite: imperative scene control, engine-like loops, non-React apps, direct Three.js work.3D + React: React-hosted product surfaces, declarative scene composition, shared React state, UI-heavy 3D apps.3D asset pipeline: GLB, glTF, texture packaging, compression, LOD, runtime asset size.Alternative engine: Babylon.js or PlayCanvas requests, usually as comparison or ecosystem fit questions.Shared: core loop design, frontend direction, save/debug/perf boundaries, browser QA.
- Route to the specialist skills immediately after classification:
- Shared architecture and engine choice:
../web-game-foundations/SKILL.md
- Deep 2D implementation:
../phaser-2d-game/SKILL.md
- Vanilla Three.js implementation:
../three-webgl-game/SKILL.md
- React-hosted 3D implementation:
../react-three-fiber-game/SKILL.md
- 3D asset shipping and optimization:
../web-3d-asset-pipeline/SKILL.md
- HUD and menu direction:
../game-ui-frontend/SKILL.md
- 2D sprite generation and normalization:
../sprite-pipeline/SKILL.md
- Browser QA and visual review:
../game-playtest/SKILL.md
- Keep one coherent plan across the routed skills. Do not let engine, UI, asset, and QA decisions drift apart.
Default Workflow
- Lock the game fantasy and player verbs.
- Define the core loop, failure states, progression, and target play session length.
- Choose the implementation track:
- Default to Phaser for 2D browser games.
- Choose vanilla Three.js when the project is explicitly 3D and wants direct render-loop control in a plain TypeScript or Vite app.
- Choose React Three Fiber when the project already lives in React or wants declarative scene composition with shared React state.
- Choose raw WebGL only when the user explicitly wants a custom renderer or shader-first surface.
- Define the UI surface early. Browser games usually need a DOM HUD and menu layer even when the playfield is canvas or WebGL.
- For 3D starter scaffolds, default to a low-chrome HUD that preserves the playfield and keeps secondary panels collapsed.
- Decide the asset workflow:
- 2D characters and effects: use
sprite-pipeline.
- 3D models, textures, and shipping format: use
web-3d-asset-pipeline.
- Close with a playtest loop before calling the work production-ready.
Output Expectations
- For planning requests, return a game-specific plan with stack choice, gameplay loop, UI surface, asset workflow, and test approach.
- For implementation requests, keep the chosen stack obvious in the file structure and code boundaries.
- For mixed requests, preserve the plugin default: 2D Phaser first unless the user asks for something else.
- When the user asks about Babylon.js or PlayCanvas, compare them honestly but keep Three.js and R3F as the primary code-generation defaults unless the user explicitly chooses another engine.
References
- Engine selection:
../../references/engine-selection.md
- Three.js stack:
../../references/threejs-stack.md
- React Three Fiber stack:
../../references/react-three-fiber-stack.md
- 3D asset pipeline:
../../references/web-3d-asset-pipeline.md
- Vanilla Three.js starter:
../../references/threejs-vanilla-starter.md
- React Three Fiber starter:
../../references/react-three-fiber-starter.md
- Frontend prompting patterns:
../../references/frontend-prompts.md
- Playtest checklist:
../../references/playtest-checklist.md
Examples
- "Help me prototype a browser tactics game."
- "I need a Phaser-based action game loop with a HUD and menus."
- "I want a Three.js exploration demo with WebGL lighting and browser-safe UI."
- "I want a React-based 3D configurator with React Three Fiber."
- "Optimize my GLB assets for the web and keep the file sizes under control."
- "Set up the asset workflow for consistent 2D sprite animations."