Develop Web Game

What it does

When your agent uses it

• Codex is building
• Iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes
• Run a Playwright-based test script with short input bursts and intentional pauses
• Inspect screenshots/text

Example prompts

• “/develop-web-game”

Requirements

• Node.js

Workflow steps

12 steps, taken from the first numbered list in SKILL.md.

1. 1Pick a goal. Define a single feature or behavior to implement.
2. 2Implement small. Make the smallest change that moves the game forward.
3. 3Ensure integration points. Provide a single canvas and window.render_game_to_text so the test loop can read state.
4. 4Add window.advanceTime(ms). Strongly prefer a deterministic step hook so the Playwright script can advance frames reliably; without it…
5. 5Initialize progress.md. If progress.md exists, read it first and confirm the original user prompt is recorded at the top (prefix with…
6. 6Verify Playwright availability. Ensure playwright is available (local dependency or global install). If unsure, check npx first.
7. 7Run the Playwright test script. You must run $WEB_GAME_CLIENT after each meaningful change; do not invent a new client unless required.
8. 8Use the payload reference. Base actions on $WEB_GAME_ACTIONS to avoid guessing keys.
9. 9Inspect state. Capture screenshots and text state after each burst.
10. 10Inspect screenshots. Open the latest screenshot, verify expected visuals, fix any issues, and rerun the script. Repeat until correct.
11. 11Verify controls and state (multi-step focus). Exhaustively exercise all important interactions. For each, think through the full…
12. 12Check errors. Review console errors and fix the first new issue before continuing.

What it can do on your machine

Read from SKILL.md and the folder at commit c913cd9. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 1 file in scripts/ (JavaScript), which the agent can run.

  Shell commands in SKILL.md call:

  • node
  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Develop Web Game loads about 2.3k tokens when it runs, and up to ~2.4k if it reads all its reference files. Until then it costs about 79 tokens; SKILL.md has 1,059 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~79

When it runs · the whole SKILL.md, loaded when a task matches

~2.3k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~2.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from freestylefly/wesight at commit c913cd9, republished under its Apache-2.0 licence (© freestylefly). 1,059 words, ~2,340 tokens.

name

develop-web-game

description

Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.

official

true

export SKILLS_ROOT="${WESIGHT_SKILLS_ROOT:-${SKILLS_ROOT:-$HOME/Library/Application Support/WeSight/SKILLs}}"
export WEB_GAME_CLIENT="$SKILLS_ROOT/develop-web-game/scripts/web_game_playwright_client.js"
export WEB_GAME_ACTIONS="$SKILLS_ROOT/develop-web-game/references/action_payloads.json"

node "$WEB_GAME_CLIENT" --url http://localhost:5173 --actions-file "$WEB_GAME_ACTIONS" --click-selector "#start-btn" --iterations 3 --pause-ms 250

{
  "steps": [
    { "buttons": ["left_mouse_button"], "frames": 2, "mouse_x": 120, "mouse_y": 80 },
    { "buttons": [], "frames": 6 },
    { "buttons": ["right"], "frames": 8 },
    { "buttons": ["space"], "frames": 4 }
  ]
}

function renderGameToText() {
  const payload = {
    mode: state.mode,
    player: { x: state.player.x, y: state.player.y, r: state.player.r },
    entities: state.entities.map((e) => ({ x: e.x, y: e.y, r: e.r })),
    score: state.score,
  };
  return JSON.stringify(payload);
}
window.render_game_to_text = renderGameToText;

window.advanceTime = (ms) => {
  const steps = Math.max(1, Math.round(ms / (1000 / 60)));
  for (let i = 0; i < steps; i++) update(1 / 60);
  render();
};

© freestylefly, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (scripts, references, assets) in SKILLs/develop-web-game of freestylefly/wesight.

• SKILL.md
• LICENSE.txt
• agents/openai.yaml
• assets/game-small.svg
• assets/game.png
• references/action_payloads.json
• scripts/web_game_playwright_client.js

Open the folder on GitHubat commit c913cd9

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in freestylefly/wesight, which our catalogue first saw on October 7, 2026.

• davila7/claude-code-templatescli-tool/components/skills/creative-design/develop-web-game