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

•

보안 및 테스팅

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.

주요 기능

Automatic Storybook story generation from React, Vue, or Svelte components
Automated CI/CD workflow generation for GitHub Actions, GitLab CI, and CircleCI
Seamless integration with existing Storybook configurations and addons
Support for leading visual testing tools including Chromatic, Percy, and BackstopJS
Intelligent component analysis to identify props, variants, and states
47 GitHub stars

사용 사례

Rapidly generating Storybook documentation with built-in accessibility and interaction tests
Setting up visual drift detection within a production-grade CI/CD pipeline
Adding automated screenshot testing to a new or existing UI component library

소개

주요 기능

Automatic Storybook story generation from React, Vue, or Svelte components
Automated CI/CD workflow generation for GitHub Actions, GitLab CI, and CircleCI
Seamless integration with existing Storybook configurations and addons
Support for leading visual testing tools including Chromatic, Percy, and BackstopJS
Intelligent component analysis to identify props, variants, and states
47 GitHub stars

사용 사례

Rapidly generating Storybook documentation with built-in accessibility and interaction tests
Setting up visual drift detection within a production-grade CI/CD pipeline
Adding automated screenshot testing to a new or existing UI component library