Skip to Content
Skillsvisual-regression

visual-regression

Set up visual regression testing with Storybook stories, tool configuration, and CI/CD workflows — supporting Chromatic, Percy, and BackstopJS.

Triggers

Natural-language phrases that auto-invoke the skill:

  • “set up visual regression”
  • “add Chromatic tests”
  • “add screenshot testing”
  • “set up Percy”
  • “add BackstopJS”
  • “configure visual regression”

What it does

  • Detects existing setup: framework (React/Vue/Svelte), Storybook version, VR tool, and CI platform
  • Parses the component to extract props, variants, and states
  • Generates a .stories.tsx file with all variants plus accessibility (a11y) tests
  • Creates tool config — chromatic.config.json, .percy.yml, or backstop.config.js — and wires the Storybook addon and package scripts
  • Generates a CI workflow for the detected platform (GitHub Actions, GitLab CI, or CircleCI)
  • Outputs setup instructions for API tokens, secrets, and capturing the first baseline

Example

"Set up visual regression for the ProfileCard component"

Detects React + Storybook, generates ProfileCard.stories.tsx with size and variant stories, a Chromatic config, and a chromatic.yml GitHub workflow, then prints the token and baseline steps.

frontend-testbackend-endpoint