Harness for developing and testing browser-based HTML games.
Install
mkdir -p .claude/skills/html-game-harness && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12676" && unzip -o skill.zip -d .claude/skills/html-game-harness && rm skill.zipInstalls to .claude/skills/html-game-harness
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use for developing browser-only HTML games in this repository with pure game-rule tests, Playwright verification, and the runtime AI harness.Key capabilities
- →Read `AGENTS.md` and `PLAN.md`
- →Place deterministic rules in `src/core`
- →Add or update Vitest tests in `tests/unit`
- →Run `npm run eval:game` for level or algorithm changes
- →Use `tests/harness/gameDriver.ts` for Playwright tests
- →Inspect screenshots with `npm run artifact:browser`
How it works
The skill guides game development by enforcing a structured workflow that includes reading documentation, organizing code, writing tests, and using specific commands for evaluation and visual inspection.
Inputs & outputs
When to use html-game-harness
- →Testing HTML game logic
- →Automating browser-based game regression tests
- →Debugging game loop state
About this skill
HTML Game Harness
Use this skill whenever modifying the game, stages, rendering, persistence, or tests.
Workflow
- Read
AGENTS.md. - Read
PLAN.mdand update it first if the game concept, loop, controls, or milestones change. - Put deterministic rules in
src/core. - Add or update Vitest tests in
tests/unitbefore changing behavior. - Run
npm run eval:gamebefore and after hard level or algorithm changes. - Keep DOM and storage code thin.
- Use
tests/harness/gameDriver.tsfor Playwright tests. - For visual changes, run
npm run artifact:browserand inspect the screenshot. - Log long-running iteration notes under
.logs/. - Save image generation prompts under
.prompts/. - Run
npm run checkbefore delivery.
Harness Requirements
The page must expose window.__GAME_HARNESS__ with:
snapshot()dispatch(action)press(key)reset(seedOrState?)loadStage(stageIndex)
Do not expose unstable internal DOM nodes through the harness.
Review Focus
Flag missing tests, weakened harness coverage, undocumented changes to PLAN.md, missing visual prompts for generated assets, and any network or server-side persistence added to this static game.
When not to use it
- →When not modifying the game
- →When not modifying stages or rendering
- →When not modifying persistence or tests
Limitations
- →Requires `window.__GAME_HARNESS__` to be exposed
- →Requires `snapshot()`, `dispatch(action)`, `press(key)`, `reset(seedOrState?)`, `loadStage(stageIndex)` methods
- →Does not expose unstable internal DOM nodes through the harness
How it compares
This skill provides a specific, structured workflow for HTML game development with integrated testing and validation tools, ensuring adherence to project standards unlike a generic development process.
Compared to similar skills
html-game-harness side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| html-game-harness (this skill) | 0 | 3mo | No flags | Intermediate |
| webapp-testing | 353 | 3mo | Review | Intermediate |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
| accessibility | 42 | 5mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
webapp-testing
anthropics
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
accessibility
tech-leads-club
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
playwright-browser-automation
lackeyjb
Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.
svelte-expert
Raudbjorn
Expert Svelte/SvelteKit development assistant for building components, utilities, and applications. Use when creating Svelte components, SvelteKit applications, implementing reactive patterns, handling state management, working with stores, transitions, animations, or any Svelte/SvelteKit development task. Includes comprehensive documentation access, code validation with svelte-autofixer, and playground link generation.
browser-daemon
noiv
Persistent browser automation via Playwright daemon. Keep a browser window open and send it commands (navigate, execute JS, inspect console). Perfect for interactive debugging, development, and testing web applications. Use when you need to interact with a browser repeatedly without opening/closing it.