visual-regression

Visual Regression Testing Setup Skill

---

Skill Purpose

Generate complete visual regression testing setup with Storybook stories, configuration files, and CI/CD workflows.

Supports: Chromatic, Percy, BackstopJS Frameworks: React, Vue, Svelte (TypeScript/JavaScript) CI/CD: GitHub Actions, GitLab CI, CircleCI

---

What This Skill Does

1. Detects existing setup: Storybook version, VR tool, CI platform
2. Validates component: Extract props, variants, states
3. Generates stories: Complete .stories.tsx with all variants
4. Creates config files: Chromatic, Percy, or BackstopJS configuration
5. Sets up CI/CD: Auto-generate workflow files
6. Provides instructions: Next steps for API tokens, first baseline

---

Workflow

Step 1: Validate Project Setup

Execute: vr_setup_validator.py

Check:

• Framework (React/Vue/Svelte) from package.json
• Existing Storybook config (.storybook/ directory)
• Existing VR tool (chromatic, percy, backstopjs in dependencies)
• CI platform (.github/, .gitlab-ci.yml, .circleci/)
• Component file exists and is valid

Output:

{
  "framework": "react",
  "storybook_version": "7.6.0",
  "vr_tool": "chromatic",
  "ci_platform": "github",
  "component": {
    "path": "src/components/ProfileCard.tsx",
    "name": "ProfileCard",
    "props": [...],
    "valid": true
  },
  "dependencies": {
    "installed": ["@storybook/react", "@storybook/addon-essentials"],
    "missing": ["chromatic", "@chromatic-com/storybook"]
  }
}

If Storybook not found: Ask user if they want to install Storybook first, provide setup instructions.

If multiple VR tools found: Ask user which to use (Chromatic recommended).

---

Step 2: Generate Storybook Stories

Execute: story_generator.py

Process:

1. Parse component file (TypeScript/JSX/Vue SFC)
2. Extract props, prop types, default values
3. Identify variants (size, variant, disabled, etc.)
4. Generate story file from template
5. Add accessibility tests (@storybook/addon-a11y)
6. Add interaction tests (if @storybook/test available)