Initial commit

skills/visual-regression/examples/existing-storybook-vr.md

@@ -0,0 +1,109 @@
+# Example: Add Chromatic to Existing Storybook
+
+Add visual regression to project that already has Storybook configured.
+
+---
+
+## Scenario
+
+- Storybook 7.x already installed and configured
+- Existing `.stories.tsx` files for components
+- Want to add Chromatic without breaking existing setup
+
+---
+
+## Usage
+
+```
+"Add Chromatic to existing Storybook"
+```
+
+---
+
+## What Skill Does
+
+1. **Detects existing setup**: Reads `.storybook/main.js`, existing stories
+2. **Non-destructive update**: Only adds Chromatic addon
+3. **Preserves config**: Keeps existing addons, framework, settings
+4. **CI integration**: Generates workflow
+
+---
+
+## Changes Made
+
+### Before
+
+**.storybook/main.js**:
+```javascript
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+```
+
+### After
+
+```javascript
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',  // ← Added
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+};
+```
+
+---
+
+## Additional Files
+
+- `chromatic.config.json` (new)
+- `.github/workflows/chromatic.yml` (new)
+- `package.json` scripts updated
+
+---
+
+## No Stories Generated
+
+Skill detects existing stories and **skips generation**:
+
+```
+✅ Existing Storybook detected
+✅ Found 23 existing story files
+✅ Skipping story generation
+✅ Adding Chromatic configuration only
+```
+
+---
+
+## Next Steps
+
+```bash
+# Install Chromatic
+npm install --save-dev chromatic @chromatic-com/storybook
+
+# Run on existing stories
+npm run chromatic
+```
+
+All existing stories are captured as baseline automatically.
+
+---
+
+**Time saved**: 1-2 hours → 3 minutes
+**Stories affected**: 0 (uses existing)
+**Breaking changes**: None