What problem does it solve? When writing or revising HTML/CSS, developers need fast, deterministic feedback on how close their markup is to a design target without paying for VLM API calls or eyeballing screenshots manually. This Skill provides five DOM and pixel-based signal tools that surface concrete defects so an agent or developer can iterate markup to convergence. ## Core Features & Use Cases - Component build loop: Pixel-diff a reference image against your current HTML, producing a Markdown report with bbox IoU, palette comparison, text-row alignment, and a diff heatmap. - Component scanning and token audits: Crop a full-page screenshot into per-component PNGs, and audit computed styles against design-token scales (spacing, radius, z-index) with snap-to-nearest violations. - Theme parity and i18n stress testing: Detect unthemed elements that render identically in light and dark mode, and inflate text nodes to find selectors that overflow under longer translations. - Use Case: You are reproducing a Figma export as HTML. Run the build component loop after each edit, read the pixel-diff report, adjust your CSS, and re-run until the diff converges — all locally with zero API cost. ## Quick Start Ask the agent to run the build component loop comparing your design.png against current.html and iterate on the markup until the pixel diff converges.
