Which visual regression tools are supported by this skill?

The skill provides native support for Chromatic (the recommended default), Percy, and BackstopJS, including full configuration file generation for each.

Can it automatically handle CI/CD integration?

Absolutely. It detects your CI platform (GitHub, GitLab, or CircleCI) and generates the appropriate workflow files to run visual tests on every push or pull request.

Which frontend frameworks are compatible?

The skill supports React, Vue, and Svelte projects using either TypeScript or JavaScript.

Does this skill work with existing Storybook installations?

Yes, it intelligently detects your existing Storybook version and configuration, adding only the necessary addons and scripts without overwriting your manual work.

Visual Regression Testing Setup

Name: Visual Regression Testing Setup
Author: alekspetrov

byalekspetrov

•

Security & Testing

Automates the end-to-end setup of visual regression testing suites including Storybook stories, tool configurations, and CI/CD workflows.

This skill streamlines the implementation of visual testing by automatically generating comprehensive Storybook stories for your components, configuring industry-standard tools like Chromatic, Percy, or BackstopJS, and establishing automated CI/CD pipelines. It analyzes your project's framework and existing dependencies to provide a tailor-made testing environment that catches visual regressions and UI drift before they reach production.

Key Features

01Automatic Storybook story generation from React, Vue, or Svelte components

02Automated CI/CD workflow generation for GitHub Actions, GitLab CI, and CircleCI

03Seamless integration with existing Storybook configurations and addons

04Support for leading visual testing tools including Chromatic, Percy, and BackstopJS

05Intelligent component analysis to identify props, variants, and states

0647 GitHub stars

Use Cases

01Rapidly generating Storybook documentation with built-in accessibility and interaction tests

02Setting up visual drift detection within a production-grade CI/CD pipeline

03Adding automated screenshot testing to a new or existing UI component library

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add alekspetrov/navigator visual-regression

For use in Claude.ai and ChatGPT

Download Skill