visual-regression_skill

Overview

This skill sets up visual regression testing for Storybook-based component libraries by generating stories, configuration files, and CI/CD workflows. It supports Chromatic, Percy, and BackstopJS and targets React, Vue, and Svelte projects in TypeScript or JavaScript. The goal is a repeatable, CI-driven pipeline that captures baselines and flags visual drift automatically.

How this skill works

The skill first inspects the repository to detect framework, Storybook version, existing VR tool, and CI platform. It analyzes the target component to extract props, variants, and states, then generates Storybook stories that cover those variants plus accessibility and interaction hooks. Next it creates the chosen VR tool configuration (Chromatic/ Percy/ BackstopJS) and adds CI workflow files for GitHub Actions, GitLab CI, or CircleCI. Finally it outputs concrete next steps for tokens, secrets, installing dev deps, and creating the first baseline.

When to use it

• You have a Storybook-enabled project and want automated screenshot testing.
• You need CI-driven visual testing for a single component or an entire design system.
• You want quick integration with Chromatic, Percy, or a self-hosted BackstopJS setup.
• You want stories generated from component props and states to reduce manual work.
• You need a ready-to-run GitHub Actions/GitLab/CircleCI workflow for VR uploads.

Best practices

• Start with core primitives (Button, Input, Card) before adding every component.
• Capture important states: default, hover, focus, disabled, error, and responsive sizes.
• Keep baselines on the main branch and review all visual change requests manually.
• Combine visual tests with interaction and a11y checks in the same stories.
• Use onlyChanged/exit-zero options in CI to reduce noise and speed runs.

Example use cases

• Add Chromatic to an existing Storybook project and create a CI job to upload snapshots.
• Generate .stories.tsx files with variants for a new ProfileCard component and add Chromatic config.
• Set up Percy for multi-framework visual tests across responsive breakpoints.
• Configure BackstopJS for a self-hosted visual regression pipeline in a design system repo.
• Bulk-generate stories for all components and add a GitHub Actions workflow to run VR on PRs.