visual-regression
CommunityEnsure pixel-perfect UI with automated visual tests.
Software Engineering#CI/CD#frontend#UI testing#regression testing#visual testing#chromatic#storybook
Authoralekspetrov
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Manually checking for visual discrepancies in UI components across different states and browsers is tedious and error-prone. This skill automates the setup of visual regression testing, ensuring design consistency and preventing visual bugs.
Core Features & Use Cases
- Comprehensive Setup: Generates Storybook stories, configuration files (for Chromatic, Percy, or BackstopJS), and CI/CD workflows (GitHub Actions, GitLab CI).
- Intelligent Component Analysis: Parses your component files to extract props, variants, and states, then generates exhaustive stories to cover all visual permutations.
- Design System Integration: Can set up visual regression for an entire design system, including token validation against extracted Figma tokens.
- Use Case: You've built a
ProfileCardcomponent. Say "Set up visual regression for ProfileCard component." The skill will generate Storybook stories for all its variants, configure Chromatic, and create a GitHub Actions workflow, ready to catch any visual changes.
Quick Start
Example: Set up visual regression for a component
"Set up visual regression for ProfileCard component"
Dependency Matrix
Required Modules
chromatic@chromatic-com/storybook
Components
functionsexamplestemplates
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: visual-regression Download link: https://github.com/alekspetrov/navigator/archive/main.zip#visual-regression Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.