What problem does it solve?
Visual audits and design-parity checks need reproducible screenshot evidence, but ad-hoc captures suffer from unsettled fonts, wrong viewports, stale Storybook servers, and unverifiable story IDs. This Skill standardizes the entire capture workflow so every PNG is deterministic, inspectable, and backed by a validated evidence bundle.
Core Features & Use Cases
- Deterministic CDP capture: Drives headless Chrome through the Chrome DevTools Protocol with explicit load-event waits, font readiness checks, and pinned viewport emulation for consistent PNG output.
- Storybook story resolution: Lists real story IDs from a running Storybook's index.json so captures never land on the "Couldn't find story" fallback frame.
- Visual-contract evidence bundles: Generates side-by-side images, pixel diffs, and comparison metrics, then validates the full bundle (reference.png, implementation.png, diff.png, comparison.json, review.md) against a strict schema before parity is claimed.
- Use Case: When implementing a UI from a trusted design mock, capture the reference and implementation at matched viewports, generate the diff artifacts, and produce a validated review proving zero blocking divergences.
Quick Start
Use the eng-ui-screenshot skill to capture the systems-tasks-routes-tasks--default-list Storybook story at 1440x900 and save the PNG evidence.
