canvas-webgame-build

Builds and headlessly verifies single-file Canvas2D web games in vanilla JavaScript.

Updated Aug 21, 2026
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill canvas-webgame-build-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas-webgame-build
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/canvas-webgame-build
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill canvas-webgame-build-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building a playable web game is only half the job — verifying it works is often blocked when browser automation, Playwright, or vision tooling is unavailable due to quota limits or headless environments. This Skill provides a layered build workflow plus a Node-based headless harness that verifies game logic and render-safety without any browser. ## Core Features & Use Cases - Single-file game builds: Produces one self-contained index.html with inline styles and scripts — no build step, no TypeScript, no framework — ideal for top-down arcade, survival, zombie, and tower-defense games. - Layered, verifiable workflow: Plans the build as ordered layers (scaffold, world, player, loot, enemies, boss, weapons, economy, audio/HUD) with each layer independently verified before moving on. - Headless verification harness: A Node script stubs the DOM and Canvas2D context, evals the game's script, and drives it via a window.ZDAY debug handle — running state assertions and a 2000–3000 frame stress loop across multiple random seeds. - Use Case: A user hands you a game design doc for a top-down zombie survival game. You build it layer by layer as a single HTML file, expose the debug handle, and prove correctness with the headless harness before ever opening a browser. ## Quick Start Ask the agent to build a single-file Canvas2D web game from your game design doc and verify it with the headless harness.

Frequently Asked Questions about canvas-webgame-build

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

FAQPage Schema
How do I verify a Canvas2D web game without a browser?▼

Use a Node harness that stubs the DOM and Canvas2D context, evals the game's script tag, and drives it through a window.ZDAY debug handle. Assert on game state and run a 2000–3000 frame update/render loop to catch render-time crashes.

How to build a single-file HTML5 game in vanilla JavaScript?▼

Write one self-contained index.html with inline style and script tags, no build step or framework. Plan the build in ordered layers (scaffold, world, player, enemies, economy, audio/HUD) and verify each layer independently before proceeding.

Can I test game logic when Playwright or vision tools are unavailable?▼

Yes. A headless Node harness replaces browser automation by stubbing window, document, canvas, and AudioContext, then calling the game's update and render functions directly. Pixels are not checked, but logic correctness and crash-safety are fully verified.

Why does my headless canvas test pass once but fail on other seeds?▼

Games seeded with Math.random produce different map layouts, so fixed-position assertions become fragile. Make tests seed-independent by scanning for a guaranteed-clear point instead of asserting at fixed offsets, and re-run across at least three seeds.

What are the limitations of headless canvas game testing?▼

The stubbed Canvas2D context swallows all draw calls, so visual output and pixel correctness are not verified — only logic and crash-safety. Final visual confirmation still requires opening the game in a real browser.