What problem does it solve? Deploys and redesigns can silently change how pages look, and manual before-and-after checking across many pages and breakpoints is slow and error-prone. This Skill captures matched screenshots of a baseline site and a current site, flags pages where structure or content changed, and optionally runs pixel-perfect diffs so regressions surface before users do. ## Core Features & Use Cases - Structural comparison: Captures full-page screenshots at matched URL paths and breakpoints, then flags changes in titles, heading counts, body text length, console errors, and broken images. - Pixel-perfect diffing: Uses pixelmatch-based snapshots with configurable thresholds, producing baseline, actual, and diff PNGs that highlight exactly which pixels changed. - Baseline versioning and rollback: Every baseline overwrite archives the previous image (up to 5 versions), so a wrongly accepted baseline can be listed and restored. - AI diff narration: Optionally turns a baseline/actual/diff PNG triple into a plain-English change list with a severity rating via a Claude API call. - Use Case: Before deploying, compare staging against production across your top five pages at desktop, tablet, and mobile widths, then review the flagged screenshot pairs and the HTML report. ## Quick Start Ask the AI to visually compare https://staging.example.com against https://example.com for the homepage, pricing, and signup pages across desktop and mobile breakpoints.
