develop-web-game

Run Playwright input bursts on HTML/JS web games and capture screenshots plus text state.

1|Updated May 13, 2026
One-click install
npx skills add https://github.com/wtgoku-create/PopiStudio --skill develop-web-game-wtgoku-create
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: develop-web-game
Source: https://github.com/wtgoku-create/PopiStudio/tree/main/SKILLs/develop-web-game
Command: npx skills add https://github.com/wtgoku-create/PopiStudio --skill develop-web-game-wtgoku-create

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill removes the guesswork from web game iteration by providing a reliable development and testing loop that validates each change through automated bursts, screenshots, and state/text capture.

Core Features & Use Cases

  • Deterministic iteration loop: implement small changes, advance time deterministically via window.advanceTime(ms), and re-run the Playwright client to reduce flakiness.
  • State observability: require window.render_game_to_text so the test loop can capture concise, actionable JSON for debugging without relying only on visuals.
  • Action-driven verification: run scripted keyboard/mouse bursts based on a shared payload reference to validate movement, combat, interactions, menus/pause, and win/lose transitions.
  • Debug-first diagnostics: capture console errors and screenshot artifacts after each burst, then fix the first new issue before continuing.

Quick Start

Run the Playwright loop by pointing it at your running game URL and providing the skill’s action payloads file so it performs repeated input bursts, captures screenshots, and records render_game_to_text state.

Frequently Asked Questions about develop-web-game

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate Playwright tests for HTML5 web games to verify multi-step interactions?

Use Playwright to run scripted keyboard and mouse input bursts against your running game URL. The test loop captures screenshots and text state after each burst to verify multi-step interactions like movement, combat, and menu flows reliably.

Why are my web game UI tests flaky and how do I capture deterministic game state?

Web game tests are flaky without deterministic time stepping. Capture deterministic state by requiring your game to expose `window.advanceTime(ms)` for time control and `window.render_game_to_text` for concise JSON state output during test bursts.

Do I need to install Playwright to run automated input bursts for game state capture?

Yes, an installed Playwright client is required to drive the automated input bursts. The Skill uses Playwright to execute keyboard and mouse payloads, capture screenshots, and record console errors during the game validation loop.

What is the best way to debug HTML5 game movement and win/lose transitions locally?

Debug HTML5 game movement and win/lose transitions using a debug-first diagnostic loop. Run scripted input bursts, capture console errors and screenshot artifacts after each iteration, then fix the first new issue before continuing.

Does this Playwright testing loop work without exposing a render_game_to_text function?

No, the testing loop requires the `window.render_game_to_text` function. This function provides concise JSON state output for debugging and state observability, ensuring the test loop captures actionable data without relying solely on visual screenshots.