#What it does

The develop-web-game skill provides a structured workflow for building HTML/JS web games with a Playwright-based test loop. It enforces an implement-act-pause-observe-adjust cycle, captures screenshots and game state text after each change, and validates controls, interactions, and visual output.

#How to use

$develop-web-game

Build and iterate a playable web game in this workspace, validating changes with a Playwright loop.

#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.render_game_to_text for state reading
4. Add window.advanceTime(ms) -- Deterministic step hook for reliable automated tests
5. Run the Playwright test script -- Execute after each meaningful change
6. Inspect state -- Capture screenshots and text state after each burst
7. Verify controls -- Exhaustively exercise all important interactions
8. Check errors -- Review console errors, fix the first new issue before continuing
9. Iterate -- Change one variable at a time, repeat until stable

#Test script example

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

#Action payload example

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

#Test checklist

• Primary movement/interaction inputs (move, jump, shoot, confirm/select)
• Win/lose or success/fail transitions
• Score/health/resource changes
• Boundary conditions (collisions, walls, screen edges)
• Menu/pause/start flow if present
• Special actions tied to the request (powerups, combos, abilities, puzzles, timers)

This skill is from the OpenAI Skills Catalog.