develop-web-game

• Prefer a local playwright dependency if the project already has it. • If unsure whether Playwright is available, check for npx: ` command -v npx >/dev/null 2>&1 ` • If npx is missing, install Node/npm and then install Playwright globally: ` npm install -g @playwright/mcp@latest ` • Do not switch to @playwright/test unless explicitly asked; stick to the client script.

Build games in small steps and validate every change. Treat each iteration as: implement → act → pause → observe → adjust.

`bash export CODEX_HOME="${CODEX_HOME:-$HOME/.codex}" export WEB_GAME_CLIENT="$CODEX_HOME/skills/develop-web-game/scripts/web_game_playwright_client.js" export WEB_GAME_ACTIONS="$CODEX_HOME/skills/develop-web-game/references/action_payloads.json" ` User-scoped skills install under $CODEX_HOME/skills (default: ~/.codex/skills).

• Pick a goal. Define a single feature or behavior to implement. • Implement small. Make the smallest change that moves the game forward. • Ensure integration points. Provide a single canvas and window.render_game_to_text so the test loop can read state. • 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. • 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. • Verify Playwright availability. Ensure playwright is available (local dependency or global install). If unsure, check npx first. • Run the Playwright test script. You must run $WEB_GAME_CLIENT after each meaningful change; do not invent a new client unless required. • Use the payload reference. Base actions on $WEB_GAME_ACTIONS to avoid guessing keys. • Inspect state. Capture screenshots and text state after each burst. • Inspect screenshots. Open the latest screenshot, verify expected visuals, fix any issues, and rerun the script. Repeat until correct. • 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 render_game_to_text reflects the same state shown on screen. If anything is off, fix and rerun. Examples of important interactions: move, jump, shoot/attack, interact/use, select/confirm/cancel in menus, pause/resume, restart, and any special abilities or puzzle actions defined by the request. Multi-step examples: shooting an enemy should reduce its health; when health reaches 0 it should disappear and update the score; collecting a key should unlock a door and allow level progression. • Check errors. Review console errors and fix the first new issue before continuing. • Reset between scenarios. Avoid cross-test state when validating distinct features. • Iterate with small deltas. Change one variable at a time (frames, inputs, timing, positions), then repeat steps 7–13 until stable. Example command (actions required): ` node "$WEB_GAME_CLIENT" --url http://localhost:5173 --actions-file "$WEB_GAME_ACTIONS" --click-selector "#start-btn" --iterations 3 --pause-ms 250 ` Example actions (inline JSON): `json { "steps": [ { "buttons": ["left_mouse_button"], "frames": 2, "mouse_x": 120, "mouse_y": 80 }, { "buttons": [], "frames": 6 }, { "buttons": ["right"], "frames": 8 }, { "buttons": ["space"], "frames": 4 } ] } `