Which visual regression tools are supported?

The skill supports Chromatic (recommended for Storybook), Percy, and BackstopJS.

Can it integrate with my existing CI/CD pipeline?

Absolutely. It automatically detects and generates configuration for GitHub Actions, GitLab CI, and CircleCI.

What happens if I don't have Storybook installed?

The skill will detect the missing setup and provide you with the exact commands and instructions to initialize Storybook before proceeding with the regression setup.

Does this skill work with React, Vue, and Svelte?

Yes, it detects your framework from package.json and generates the appropriate story templates for React, Vue, and Svelte.

Visual Regression Testing

Name: Visual Regression Testing
Author: dkyazzentwatwa

bydkyazzentwatwa

•

安全与测试

Automates the end-to-end setup of visual regression testing for frontend components using Storybook and CI/CD pipelines.

This skill accelerates the implementation of visual regression testing by automatically generating Storybook stories, configuring industry-standard tools like Chromatic or Percy, and establishing automated CI/CD workflows. It intelligently analyzes your React, Vue, or Svelte components to identify props and variants, ensuring comprehensive visual coverage and preventing unexpected UI regressions across your entire design system. Ideal for teams looking to maintain pixel-perfect interfaces with minimal manual configuration.

主要功能

01Sets up CI/CD workflows for GitHub Actions, GitLab CI, and CircleCI

0229 GitHub stars

03Configures Chromatic, Percy, or BackstopJS automatically

04Includes accessibility and interaction test boilerplate

05Generates comprehensive Storybook stories with prop-based variants

06Detects existing project frameworks and missing dependencies

使用场景

01Generating documentation-ready Storybook stories for complex components

02Automating UI snapshot reviews within pull requests to prevent visual drift

03Implementing visual regression for a new or existing design system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dkyazzentwatwa/supernavigator visual-regression

For use in Claude.ai and ChatGPT

Download Skill