Claude Fable 5 Mirror Game — Development skill for Claude Code

MirrorForge

A browser-native mini game engine and playable reflection-puzzle demo, rendered with **full-scene compute-shader ray tracing in WGSL** (WebGPU). No runtime dependencies — the math library, renderer, scene system, input, gameplay, and tooling are all built here.

A dim reflective chamber. A beam fires from an emitter and stops on a wall. Click the mirrors, rotate them, and guide the beam to the dark receiver. When it lands: light floods the disc, the beam turns green — solved.

Running

npm install        # dev deps only: typescript, vite, vitest, @playwright/test, @webgpu/types
npx playwright install chromium

npm run dev        # vite dev server (http://localhost:5173)
npm run build      # production build
npm run preview    # serve the build (http://localhost:4173)

npm test           # vitest unit suites (math, intersect, beam, picking, …)
npm run e2e        # playwright e2e (builds + serves automatically)
npm run verify     # tsc --noEmit && vitest run && playwright test  ← the gate

**Note:** the e2e suite builds and serves on port **4173** with `reuseExistingServer: false` (a stale server must never serve an old build). If a leftover `vite preview` holds that port, the e2e leg fails with a port-in-use error — close it first.

Requires a WebGPU-capable browser (latest Chrome/Edge). Unsupported browsers get a screen explaining exactly why.

Controls

Input	Action
drag	orbit the camera
wheel	zoom
click a mirror	select it (pulsing tint)
drag on the selected mirror / Q,E	rotate it (the beam updates live)
R / reset button	reset the puzzle
` (backtick)	engineer's overlay: fps, accumulation, render modes, presets

Architecture (one screen)

src/
  main.ts                boot, wiring, RAF loop, game wiring
  math/                  vec3 · mat4 · quat · scalar      (pure, zero imports)
  core/                  ray · intersect · reflect · constants