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

Detects existing setup: Reads .storybook/main.js, existing stories
Non-destructive update: Only adds Chromatic addon
Preserves config: Keeps existing addons, framework, settings
CI integration: Generates workflow

Changes Made

Before

.storybook/main.js:

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

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

# 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

2.0 KiB Raw Permalink Blame History