What problem does it solve? When you deliver a single-file HTML page with canvas drawing or CSS/JS animation but cannot open it in a browser or screenshot it, you risk shipping code that looks plausible but is broken, or painting shapes that do not read as intended. This Skill provides a build posture and a headless verification routine that catches most breakage without any rendering. ## Core Features & Use Cases - Self-contained HTML build guidance: Inline styles and scripts, devicePixelRatio-aware canvas sizing, and prefers-reduced-motion support for crisp, accessible animation. - Canvas stencil technique: Negative-space shape rendering using destination-out compositing, particle spray bursts, mist overlays, and drip effects for graffiti-style art. - Headless verification checklist: Static checks including node --check on extracted scripts, geometry math assertions, getElementById/id wiring greps, and composite-operation balance counting. - Use Case: You are asked to create an animated spray-paint smiley face as a single HTML file on a headless server with no browser or vision model. You build it with the stencil technique, then run the four static checks and report the result as logic-verified, not pixel-verified. ## Quick Start Create a self-contained HTML canvas animation of a spray-painted stencil face and verify it headlessly using the static checks in this skill.
