# develop-web-game

This skill lays out a development and testing loop for HTML and JavaScript games. Use it while adding game features and checking each meaningful change in a browser.

- skill · `type=skill` · Claude Code · 342 installs
- Author: openai
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/develop-web-game
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/skills/develop-web-game

## What it does

The skill breaks game work into small changes, then checks each one with Playwright. A test script runs browser actions; the developer reviews screenshots, the game's text state, and console errors before making a fix and running the test again.

The loop needs an available `playwright`, a canvas, and a `window.render_game_to_text` function that returns game state as JSON. It also uses `window.advanceTime(ms)`, an action reference file named `action_payloads.json`, and the `web_game_playwright_client.js` script. The test script cannot run without `playwright`.

The workflow calls for tracking work in `progress.md`, exercising controls and game-state transitions, and resetting state between separate scenarios. Screenshots must be opened and inspected, not merely generated. The text-state output should match what appears on screen.

## Requirements
- Works with: Playwright

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --skill creative-design/develop-web-game
```

2. **Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill develop-web-game -a claude-code
```

3. **Manually: put the files in place**
- File: `~/.claude/skills/develop-web-game/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/develop-web-game/

### Codex

**Manually: put the files in place**
- File: `.agents/skills/develop-web-game/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

**Manually: put the files in place**
- File: `.cursor/skills/develop-web-game/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates develop-web-game
```

2. **Manually: put the files in place**
- File: `.github/skills/develop-web-game/SKILL.md`

### Gemini CLI

**Platform CLI**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/develop-web-game
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/develop-web-game/SKILL.md` — The legacy .windsurf/skills/ path still works

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/creative-design/develop-web-game

## When to use it
- test a new game mechanic in the browser
- compare game state with what appears on screen
- spot new console errors after a code change
- check the full path from player input to game outcome
- rerun checks after fixing a defect

## Example prompts
- Add a jump action for the character and test it in the browser with Playwright.
- Check that collecting a key opens the door and updates the game state.
- Look for new console errors after the menu change, then run the checks again.

## Similar
- [orbit-card](https://affpapa.org/en/nevibecode/skills/orbit-card.md) — skill · 10000 installs
- [cad](https://affpapa.org/en/nevibecode/skills/cad.md) — skill · 14000 installs
- [step-parts](https://affpapa.org/en/nevibecode/skills/step-parts.md) — skill · 11200 installs
- [sdf](https://affpapa.org/en/nevibecode/skills/sdf.md) — skill · 10500 installs
- [urdf](https://affpapa.org/en/nevibecode/skills/urdf.md) — skill · 10500 installs
- [hatch-pet](https://affpapa.org/en/nevibecode/skills/hatch-pet.md) — skill · 3300 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 495 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md