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**: ```json { "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...