# 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