Agent skill · design visual · aj-geddes
visual-regression-testing
Detect unintended visual changes in UI by comparing screenshots across versions. Use for visual regression, screenshot diff, Percy, Chromatic, UI testing, and visual validation.
Why this skill is useful
Provides specific implementation patterns and best practices for visual regression testing using various tools like Playwright, Percy, and Chromatic that the AI wouldn't reliably generate on its own.
What it needs
Requires backstopjs, cypress, playwright installed locally. About 2k tokens when loaded. Last updated 2026-03-04. 307 stars on the source repository.
What this skill does
Visual Regression Testing Table of Contents Overview When to Use Quick Start Reference Guides Best Practices Overview Visual regression testing captures screenshots of UI components and pages, then compares them across versions to detect unintended visual changes. This automated approach catches CSS bugs, layout issues, and design regressions that traditional functional tests miss. When to Use Detecting CSS regression bugs Validating responsive design across viewports Testing across different browsers Verifying component visual consistency Catching layout shifts and overlaps Testing theme changes Validating design system components Reviewing visual changes in PRs Quick Start Minimal working example: Reference Guides Detailed implementations in the references/ directory: Guide Contents --- --- Playwright Visual Testing Playwright Visual Testing Percy Visual Testing Percy Visual Testing Chromatic for Storybook Chromatic for Storybook Cypress Visual Testing Cypress Visual Testing BackstopJS Configuration BackstopJS Configuration Handling Dynamic Content Handling Dynamic Content Testing Responsive Components Testing Responsive Components Best Practices ✅ DO Hide or mock dynamic content (timestamps, ads) Test across multiple viewports Wait for animations and images to load Use consistent viewport sizes Disable animations during capture Test interactive states (hover, focus) Review diffs carefully before approving Store baselines in version control ❌ DON'T Test pages with constantly changing content Ignore small legitimate differences Skip responsive testing Forget to update baselines after design changes Test pages with random data Use overly strict thresholds (0% diff) Skip browser/device variations Commit unapproved diffs
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aj-geddes/visual-regression-testing