skills.rest
Raynos
RaynosCOMMUNITY
Explore all skills by this author →
𝕏@RaynosGitHub

capture-game-states

Capture HTML5 game visual states as screenshots and recordings via headless browser automation.

1|Updated Jun 29, 2026
Search Tags:#playwright#visual testing#ffmpeg#screenshot#headless browser#game qa#canvas recording
One-click install
npx skills add https://github.com/Raynos/kami-kakushi --skill capture-game-states-raynos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: capture-game-states
Source: https://github.com/Raynos/kami-kakushi/tree/main/.claude/skills/capture-game-states
Command: npx skills add https://github.com/Raynos/kami-kakushi --skill capture-game-states-raynos

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, ffmpeg.

What problem does it solve? Visual QA of an HTML5 game requires reaching specific in-game states and capturing them faithfully, which is tedious and error-prone when done manually through a headed browser. ## Core Features & Use Cases - Static state screenshots: Drive the game to a target state via the DEV-only window.__qa play API, pause the loop, settle one frame, and capture a lossless screenshot. - Short recordings: Record the canvas with MediaRecorder, split the clip into frames with ffmpeg, build a contact sheet, and pull a lossless PNG candidate. - Forced rare states: Jump directly to late unlocks, low-probability outcomes, or win/lose screens that a short natural playthrough cannot reach. - Use Case: Before merging a UI change, capture before/after screenshots of every menu, core-loop screen, and unlock panel to audit the visual diff. ## Quick Start Ask the AI to start the dev server and capture a headless screenshot of the game's main menu and combat screen using the capture-game-states skill.

Frequently Asked Questions about capture-game-states

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

FAQPage Schema
How do I screenshot a specific game state headlessly?▼

Run the dev server, drive the game to the target state using the window.__qa play API in a headless Playwright page, then call pause() and frames(1) to settle one frame before taking the screenshot. Screenshot the full page so DOM overlays like menus and modals are included.

How do I record HTML5 canvas gameplay to a video file?▼

Record the canvas with MediaRecorder over canvas.captureStream(fps) while the game loop runs in real time, then save the blob to disk. Use ffmpeg to split the clip into frames and build a contact sheet for review.

Can I capture rare or end-game states without playing through?▼

Yes, the __qa API provides forceState(patch), jumpToPhase2(), jumpToAscension(), and toRung/toTier helpers to jump directly to late unlocks or terminal screens. Capture terminal states last since they may end the session.

Why use a contact sheet instead of reading frames individually?▼

A montage contact sheet lets you judge roughly 100 frames in a single image instead of one read per frame. After picking the best frame number, extract it as a lossless PNG since webm codecs add compression artifacts.

Why must the browser be headless for game QA capture?▼

The project enforces headless-only capture through a PreToolUse hook that blocks Playwright MCP and Chrome DevTools MCP browser tools. Modern headless chromium renders DOM overlays correctly, so page screenshots remain faithful.

Related Skills

Explore More Software Engineering Skills→
autonomous-aiautonomous-ai
465

harness-phaser

Guides building Phaser games inside a Harness workspace with Vite dev-server pane and verdict checks.

Official
Intermediate
mlopscommunitymlopscommunity
37

visual-regression

Capture UI screenshots with Playwright and compare visual differences between code versions.

Official
Advanced
aiguy611aiguy611

playtesting

Coordinate structured playtesting workflows to surface bugs, usability issues, and balance problems.

Community
Intermediate
mofa-orgmofa-org
11

mofa-verge-browser

Automate GUI browser sandbox tasks with Verge Browser and CDP.

Official
Advanced