What problem does it solve? Full-page visual diffs are too noisy when repairing a single component: the image is large, changes cascade across unrelated regions, and the component under repair is buried in unrelated pixels. This Skill narrows visual regression testing to one mounted component so the diff is small enough to read and act on. ## Core Features & Use Cases - Component-scoped screenshots: Mounts a story through a Playwright component-testing gallery (window.mount/window.unmount contract) and screenshots only that component via vlmkit check story, producing diffs up to 47x smaller than full-viewport shots. - Baseline → diff → fix loop: First run writes baselines, subsequent runs report story-drift with heatmaps and region geometry, and intended changes are approved with --update-baseline. - Copyable gallery templates: Ships ready-to-use gallery implementations for React, Vue, and vanilla JS (plus a host page and story template), since Playwright ships no gallery template. - Use Case: While restyling a Button component, run vlmkit check story components/Button/Primary --gallery <url> after each edit, read the heatmap regions, fix, and re-run until the story reports unchanged. ## Quick Start Ask the agent to set up a component gallery from the bundled templates and run component-level visual regression on a specific story until the diff is clean.
