Name the first minute.
What will someone do, feel, or learn? Agree the player’s goal, device targets, and visible checks that will tell you the game is ready.
A game is more than a beautiful screen.
Agree what success looks like, then start with a small playable loop: an input, a decision, a consequence, and a retry. Your agent playtests, compares the result with those checks, fixes the largest gap, and tests again. One local progress link and a short record keep your feedback and decisions intact between sessions.
The guide and starter need no account, service, remote font, CDN, or analytics. Building your game needs a capable coding agent with file and workspace access, suitable tools and art assets, time, and your feedback. The skill guides that work; it cannot guarantee a particular visual finish or a fun game.
Play it. Picture it.
Try an early playable loop beside a visual mockup or gameplay image. Give focused feedback, refine the look, then bring the final assets into the actual game.
Play, fix, repeat.
Compare the running game with the look you accepted. Playtest, check, fix, and repeat until the agreed checks pass. A missing review or real blocker stays visibly incomplete.
An available image generator can help explore a look or make assets; visuals drawn directly in code can be the finished style too. Once you accept the core play and visual direction, the agent improves assets and detail in small passes, comparing the same views and preserving your choices. A beautiful mockup and a game that feels good to play need separate reviews. Expect to steer the brief, review the first play and look, and judge the final play, art, and sound. More feedback may be needed when a decision changes; the agent works independently between available checkpoints.
A finished small starter, ready to change.
The starter is a deliberately modest Canvas collect-and-avoid game. It already has keyboard, pointer, and touch input; labelled goal and gauges; Start, Pause, mute, win, fail, retry; reduced-motion behaviour; gesture-only audio; deterministic seeded simulation; fixed-step rendering; and Node tests.
$ cd assets/starter $ python3 -m http.server 8000 $ # open http://localhost:8000 $ node --test *.test.mjs
Edit the title and colours at the top of app.js, then replace the loop deliberately. The geometry is intentionally finished starter art; it does not dictate the visual style of your game.
About the soft 5 MB target. Measure encoded browser responses required to start real gameplay—not just a menu shell. Keep that initial set below 5 MB when practical; report later levels, endings, and optional assets separately. It becomes a hard cap only when the project asks for one.
Choose tools for the game, not the habit.
The skill guides your coding agent in choosing and using tools such as Godot, Blender and Three.js. These tools are optional and aren’t included in the download. Your agent checks what’s available and explains any installation or setup needed before using them. The agent can help with setup where its environment allows.
Best first choice for compact 2D loops, interaction, and learning pieces. The included starter needs none of the optional tools below.
A project library for real-time 3D space, lighting, or a camera that makes the experience. Add it only when needed; see the Three.js installation guide.
Use its engine and editor when scenes or systems add clear value. It is a separate app; browser exports also need matching export templates.
An optional separate app for 3D assets, not a runtime or default. It needs to be available to the agent; see Blender setup.
Detect what is available. Use an authorized provider only when it materially helps; no provider, model, account, or price is assumed.
Use browser automation when the host already has it. Otherwise say so and test ordinary inputs by hand.
Four places it can go.
Blend the tea.
A fictional maker’s one-minute flavour-balancing game that teaches a product truth through play.
Keep the painting safe.
A conservation puzzle about light, humidity, and handling, with each decision explained after it matters.
Pass the pan.
A local phone-and-keyboard sauce timing game, built for short rounds and a shared finish.
Catch constellations.
A small gift game for a friend. No identity system, logo, external service, or brand needed.
Install it in a compatible coding tool.
General coding agents can read this folder. Ordinary ChatGPT without local files and a runnable workspace cannot install, run, or verify it.
| Codex | Follow Build Skills. Copy this folder to .agents/skills/make-it-playable for a project or ~/.agents/skills/make-it-playable for your user profile, then invoke $make-it-playable. |
|---|---|
| Claude Code | Follow Claude Code skills. Copy this folder to .claude/skills/make-it-playable, then invoke /make-it-playable. |
Copy a prompt, then play the result.
Indie product
Use $make-it-playable to make a local-only tea blending game for the fictional brand Little Service. Use code-native art, mouse/touch and keyboard, no logo, no accounts, and short 60-second rounds.
Learning / museum
Use $make-it-playable to make a browser puzzle for a small museum exhibit about preserving a painting. Start with a playable Canvas tracer, explain each choice after it matters, and keep it local only.
Kitchen party
Use $make-it-playable to make a pass-the-phone kitchen party game with 45-second rounds. It should work on a phone and desktop, have no brand, and keep scores only on this device.
Personal
Use $make-it-playable to make a small personal game about catching constellations for a friend. No brand or external services. Give me a local playable before you spend time on final art.
Before you call it done.
- The first loop can be played with normal inputs.
- The goal, gauges, controls, win, fail, and retry are clear.
- Phone-sized and desktop views have been checked.
- Keyboard, pointer, touch, focus, pause, mute, and hidden-tab return behave.
- Essential play does not depend on sound, flashing, or reduced-motion effects.
- Real assets have a rights basis and required attribution.
- Human fun/art/listening feedback is recorded separately from technical checks.
- The browser release is a checked allowlist, not a development folder.
Package it without publishing it.
The build script creates a one-folder ZIP, manifest, and checksum. It keeps private material, caches, evidence, and release artifacts out of the export. It does not upload or publish anything.