Claude Code Skills Add Gameplay via Specs

Published September 12, 2026

A browser game often starts as a rough sketch. The hard part is turning that sketch into a clear spec without losing the game’s shape along the way.

That is where an Add Game skill matters. It takes a game folder or a plain description, asks a few pointed questions, and then turns the answers into a structured spec. The result is less guesswork and fewer weird gaps later. That may sound dry. It is not. It is the part where a game stops being a loose idea and starts behaving like a build.

The basic flow is simple. Select Add Game, press Enter, and let the AI draft the spec. Then it pauses and asks what it still needs to know. That pause is not a bug. It is the whole trick. A game spec is stronger when the important details are confirmed before anyone starts wiring code together.

One of the first checks is often the canvas setup. For a Tetris-style game, the primary canvas sits centered at 300 by 600 pixels. A secondary canvas can sit a little off to the right. It does not need perfect alignment. That kind of choice matters because browser games often mix old-school game surfaces with newer UI panels. The layout has to feel intentional, not glued together like a hurry job from 2009.

The same idea applies to the hub. A standard hub usually shows score, lives, and level. Tetris does not need all of that in the same way. It has one life, so once that life is gone, the game ends. In practice, that means the hub keeps the Tetris logic clean by showing score and treating lives as a single, fixed value. Simple. Honest. No decorative clutter pretending to be system depth.

The Add Game workflow also asks about score handling. In this case, the right field is onScore. That may sound like a tiny detail, but small fields are where many browser game integrations go sideways. A score field tells the rest of the system what to track, and the leaderboard block can pick it up from there. For a game like Tetris, that means the hall of fame can appear automatically when the game is active, with score saved by default.

There is a useful lesson in how the spec treats the game over state. When the piece spawn function runs, the game can later emit GameOver to the main hub. That is the signal that the run has ended. The main hub handles the result, while the game component keeps doing the game part. Clean separation is the whole point. A browser game gets messy fast when every part tries to do every job.

The controls and component setup can sound fancier than they are. Extra controls are fine. The spec can keep them without drama. The component can also keep using the existing pause behavior, including the DropPost action from the platform. That is a good example of what a spec should protect. If a part already works, the spec should record it instead of “improving” it into a problem.

One technical detail deserves extra care: keyboard listeners. In game.js, they were added globally to the document. That is useful, but it can also leak into other games if nobody cleans up after them. The fix is to capture those listeners and remove them when the skill is done. The skill handles that automatically. Good cleanup is not glamorous. It is the eraser work that keeps the next game from inheriting the last game’s key presses like bad manners.

A small example makes the workflow easier to picture. Say the spec is building a Tetris version with a 300 by 600 primary canvas, a slightly offset secondary canvas, one life, score saved by default, and a Tetriminius piece model. The AI asks whether the two-canvas setup is right. It also asks whether the leaderboard should save scores. The answers are yes and yes. After that, the spec can write the game in a way that matches the real shape of the design instead of guessing at it.

The versioning step matters too. A draft spec can be generated in a deletion state, but it is not ready yet. It needs to move to approved before it can be used. That sounds bureaucratic, and it is. It is also useful. Specs do better when they pass through review instead of being treated like finished truth on first sight. Small block checks help here. Big markdown checks do not. The work is clearer when it moves one piece at a time.

The hub decision is another one worth keeping straight. The existing Tetris hub can stay as-is. The main hub only needs to adapt for the React version. That split keeps the older game behavior intact while the broader app handles the newer panel integration. The notes around HTML2 canvas and the React panel point to the same thing: a browser game can be modernized without flattening every old piece into one generic shell. The interface should fit the game, not the other way around.

There is also a practical bit about storage and skins. A Retro Neo selector can keep a Pastel option if that feature is implemented. The choice can be stored locally. That kind of preference is small, but it makes a game feel remembered. Not everything has to be a scoring rule. Sometimes the important detail is that the game comes back looking the way the player left it.

The spec also records decisions. That is not fluff. It is how a system remembers why one setup was chosen over another. The Super Base games list gets the Tetris entry. The Game, Tetris component works with Client. The leaderboard block stays in place. The accepted decisions become part of the spec’s record, which makes later changes less random. A good spec is a memory aid with teeth.

There is one more quiet benefit here. The whole process encourages a developer to slow down just enough to ask the right questions. The spec is generated, reviewed, adjusted, and finalized in steps. That is a better rhythm than dumping every idea into a giant block and hoping the machine sorts it out. Games, even simple browser ones, usually reward patience more than bravado.

After that, the lesson is plain. An Add Game skill can turn a rough game idea into a working spec by asking about canvas layout, score tracking, hub behavior, cleanup, and state changes before the code hardens. That is how a simple browser game keeps its shape while it grows features.

The Continue Screen likes this kind of small, useful weirdness. A classic game gets one more careful layer, and the odd history of the web keeps moving forward without losing its old arcade nerve.