Agent skill · software engineering · davila7
develop-web-game
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.
Why this skill is useful
Adds a Playwright-based testing script and a structured workflow for iterative web game development that the AI wouldn't generate on its own.
What it needs
Requires playwright installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Develop Web Game Build games in small steps and validate every change. Treat each iteration as: implement → act → pause → observe → adjust. Skill paths (set once) User-scoped skills install under $CODEXHOME/skills (default: ~/.codex/skills). Workflow 1. Pick a goal. Define a single feature or behavior to implement. 2. Implement small. Make the smallest change that moves the game forward. 3. Ensure integration points. Provide a single canvas and window.rendergametotext so the test loop can read state. 4. Add window.advanceTime(ms). Strongly prefer a deterministic step hook so the Playwright script can advance frames reliably; without it, automated tests can be flaky. 5. Initialize progress.md. If progress.md exists, read it first and confirm the original user prompt is recorded at the top (prefix with Original prompt:). Also note any TODOs and suggestions left by the previous agent. If missing, create it and write Original prompt: <prompt> at the top before appending updates. 6. Verify Playwright availability. Ensure playwright is available (local dependency or global install). If unsure, check npx first. 7. Run the Playwright test script. You must run $WEBGAMECLIENT after each meaningful change; do not invent a new client unless required. 8. Use the payload reference. Base actions on $WEBGAMEACTIONS to avoid guessing keys. 9. Inspect state. Capture screenshots and text state after each burst. 10. Inspect screenshots. Open the latest screenshot, verify expected visuals, fix any issues, and rerun the script. Repeat until correct. 11. Verify controls and state (multi-step focus). Exhaustively exercise all important interactions. For each, think through the full multi-step sequence it implies (cause → intermediate states → outcome) and verify the entire chain works end-to-end. Confirm rendergametotext reflects the same state shown on screen. If anything is off, fix and rerun. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/develop-web-game