visual-regression

Automate visual-regression testing setup for Storybook components with CI workflows.

196|11|Updated Oct 10, 2025

Search Tags:#CI/CD #frontend #UI testing #regression testing #visual testing #chromatic #storybook

Ready to run

npx skills add https://github.com/alekspetrov/navigator --skill visual-regression

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-regression
Source: https://github.com/alekspetrov/navigator/tree/main/skills/visual-regression
Command: npx skills add https://github.com/alekspetrov/navigator --skill visual-regression

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chromatic, @chromatic-com/storybook, and includes functions (resource) and examples (resource) and templates (resource) components.

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 ProfileCard component. 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"

Frequently Asked Questions about visual-regression

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up visual regression testing for my Storybook components?▼

Visual regression testing automates UI comparison across component states and browsers. This Skill generates Storybook stories, configures Chromatic, Percy, or BackstopJS, and provisions CI/CD workflows for GitHub Actions or GitLab CI, catching visual changes automatically.

Can I use visual regression testing with React, Vue, and Svelte projects?▼

Yes. This Skill supports React, Vue, and Svelte projects using Storybook. It parses your component files to extract props and variants, then generates comprehensive stories and tool configurations for all three frameworks.

What's the best way to prevent visual bugs in UI components across browsers?▼

Automated visual regression testing compares pixel-perfect UI renders across browser states and devices. This Skill generates exhaustive component stories with variants and accessibility tests, then integrates them with Chromatic, Percy, or BackstopJS to detect visual discrepancies in CI/CD pipelines.

Do I need to manually write Storybook stories for visual regression testing?▼

No. This Skill intelligently analyzes your component files to extract props and states, then automatically generates comprehensive Storybook stories covering all visual permutations, variants, and accessibility scenarios.

How does visual regression testing work with design systems?▼

This Skill supports design system integration by setting up visual regression for entire component libraries. It can validate design tokens against extracted Figma tokens and generate CI workflows to maintain consistency across all system components.

What CI/CD platforms does visual regression testing support?▼

This Skill generates CI/CD workflows for GitHub Actions and GitLab CI, automating visual regression tests within your existing deployment pipelines and integrating with Chromatic, Percy, or BackstopJS.