develop-web-game

Develop HTML and JavaScript web games with a Playwright testing loop.

Updated Aug 27, 2026

Search Tags:#testing #game development #html #javascript #playwright #web game

Ready to run

npx skills add https://github.com/ferazfhansurie/adletic-content --skill develop-web-game-ferazfhansurie

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: develop-web-game
Source: https://github.com/ferazfhansurie/adletic-content/tree/main/.agents/skills/develop-web-game
Command: npx skills add https://github.com/ferazfhansurie/adletic-content --skill develop-web-game-ferazfhansurie

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the development and testing of web games (HTML/JS) by providing a robust loop for implementing small changes, running automated tests with Playwright, and inspecting results.

Core Features & Use Cases

Iterative Development: Implement changes in small, manageable steps.
Automated Testing: Utilize Playwright for deterministic testing, including input simulation, screenshot capture, and console error logging.
State Inspection: Capture game state via render_game_to_text and visual screenshots for verification.
Use Case: Develop a new player ability in a web game, implement the code, run the Playwright script to test its functionality and visual feedback, and iterate until it works perfectly.

Quick Start

Use the develop-web-game skill to implement a small change to the web game at http://localhost:5173 and run the Playwright test script.

Frequently Asked Questions about develop-web-game

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

FAQPage Schema

How do I test web game logic reliably with HTML and JavaScript?▼

Test web game logic reliably by running Playwright scripts that use virtual time stepping for deterministic execution. This approach simulates inputs, captures screenshots, and reviews console errors to verify game state changes.

Can I use Playwright to capture game state and screenshots during automated testing?▼

Yes, Playwright captures game state during automated testing by rendering game visuals to screenshots and outputting text state via `render_game_to_text`. This allows you to inspect both visual feedback and logic outputs.

What is the best way to iterate on small changes during web game development?▼

The best way to iterate on small changes in web game development is implementing incremental updates and executing deterministic Playwright tests. This loop verifies input simulation, visual feedback, and console logs for each modification.

Does deterministic testing with virtual time stepping work for JavaScript games?▼

Deterministic testing with virtual time stepping works effectively for JavaScript games by controlling execution flow. It enables reliable input simulation and state verification without relying on real-time performance fluctuations.

How do I check for console errors when developing an HTML game?▼

Check for console errors when developing an HTML game by executing Playwright test scripts. The automated testing loop logs console errors directly, allowing you to identify and resolve runtime issues during iteration.

Do I need a local server to run Playwright tests on a web game?▼

You need a local server to run Playwright tests on a web game, as the testing loop targets the game at a localhost address. This setup provides the environment for input simulation and screenshot capture.