Ask an AI for a browser game and you get a rock you walk straight through, a "wall" that's just wallpaper, movement that runs double-speed on a gaming monitor, and 60fps that dies the moment three enemies spawn. It looks like a game. It plays like a screensaver.
browser-engine is a Claude Code plugin that builds the other 80% — the part that makes a game a game. It knows the real constraints of web game dev and how to beat them, in 2D and 3D.
You asked for a rock. You got a picture of a rock.
| 👻 what AI ships | 🕹️ browser-engine | |
|---|---|---|
| a "solid" rock | drawImage(rock) — no body, walk right through |
sprite + collider, wired + seen in the debug overlay |
| top-down tree | whole sprite solid → invisible wall around the leaves | footprint hitbox at the trunk; you walk behind the canopy |
| fast bullet | phases through thin walls (tunneling) | swept / raycast — can't skip a collider |
| movement | x += 5 — 2× speed at 144Hz, half under load |
fixed timestep — identical on every machine |
| 200 enemies | O(n²), slideshow | spatial grid + object pool, holds 60fps |
| "physics" | one if that half-works |
axis-separated resolution: slide along walls, don't stick |
- If it looks solid, it IS solid — or it doesn't exist. Every blocker owns a collision body you can see in the debug overlay. Drawing a thing is not making a thing.
- Simulate on a clock, not a frame. Movement advances by time, never "per frame drawn." The renderer's speed never changes the game's speed.
- Never allocate in the loop. Bullets, particles, enemies — all pooled. Steady state makes zero garbage.
Five skills that load when you're building a game — plus drop-in tools, not just docs:
browser-engine— the router. Genre → collision model → stack (Phaser 4 for 2D, Three.js/Babylon + Rapier for 3D), the web's real constraints (tab throttling, rAF, one thread, GC, DPR), and what "playable" means (input buffering, coyote time, game feel).brainstorm-game-design— design the concept before code (pillars, core loop, hook, scope) and write it togame-design/GDD.mdin your project. Shipsscaffold-design-memory.mjs— one command sets up the memory + every agent's loader.brainstorm-level-design— design levels from the game's own pillars (teach → test → twist, difficulty curve, honoring the collision model), persisted togame-design/levels/.game-collision— the heart. sprite≠body rule, footprint hitboxes, tilemap collision layers, y-sort depth, axis-separated resolution, anti-tunneling. Shipscollision-debug.js(see every hitbox) andaabb-resolver.js(correct swept, axis-separated, broad-phased resolution).game-optimization— 60fps under load. Shipsgame-loop.js(fixed-timestep accumulator) andobject-pool.js(zero-GC spawning); covers batching, atlases, spatial partitioning, and profiling.
Agents forget (Antigravity resets every session; Claude & Cursor start blind). So when you come back and say "add the next level," they reinvent instead of continue. The brainstorm modes fix this by writing every decision into your game project — a single source of truth that travels with the repo:
your-game/
├── AGENTS.md # the universal loader — Claude, Cursor, Antigravity, Copilot… all read it
├── game-design/
│ ├── GDD.md # the source of truth
│ ├── decisions.md # dated log
│ └── levels/<name>.md
├── CLAUDE.md → @AGENTS.md
└── .cursor/rules/game-design.mdc
One command scaffolds it (idempotent):
node <plugin>/skills/brainstorm-game-design/tools/scaffold-design-memory.mjs --name "My Game"Built on the Agent Skills open standard, anchored by AGENTS.md (Linux Foundation) — read natively by Claude Code, Cursor, Antigravity, Copilot, Codex, Gemini CLI, Windsurf, Zed. One source of truth, thin per-agent pointers, zero maintenance tax. Full guide: INSTALL.md.
/plugin marketplace add StarchyBomb/browser-engine
/plugin install browser-engine@browser-engine
This repo is also a Codex plugin. Install it from a local clone:
codex plugin add ./browser-engineOr copy the skill folders into your Codex skills directory:
cp -R skills/* ~/.codex/skills/Codex reads .codex-plugin/plugin.json and loads the bundled skills from ./skills/. Invoke them by name: $browser-engine, $game-collision, $game-optimization, $brainstorm-game-design, $brainstorm-level-design. The drop-in tools (.js / .mjs) are framework-agnostic and work the same regardless of agent.
Then ask your agent to build any browser game. It will build collision before art, and you'll be able to see every hitbox.
skills/game-collision/tools/ and skills/game-optimization/tools/ are real, framework-agnostic ES modules you can drop into a raw-canvas game today — a collision debug overlay, a correct swept-AABB resolver with grid broad-phase, a fixed-timestep loop, and a generic object pool. Each one also tells you how to wire the same idea in Phaser / Rapier / Three instead of reinventing it.
MIT — build something you can't walk through. 🕹️