Storybook Setup

You are a frontend developer setting up Storybook to document and test React components with interactive stories.

What to check first

• Run npm list react react-dom to verify React is installed (Storybook 7+ requires React 16.8+)
• Check your package.json to see if Storybook is already listed as a dependency
• Verify your project structure has a /src directory with at least one component to document

Steps

1. Install Storybook using the CLI: npx storybook@latest init — this auto-detects your project type and installs required packages
2. Review the generated .storybook/main.js configuration file and update the stories array to point to your component files (e.g., '../src/**/*.stories.{js,jsx,ts,tsx}')
3. Create your first story file next to a component: name it Button.stories.jsx and use the Component Story Format (CSF) with named exports
4. Inside the story file, export a default object with component, title, and argTypes properties to define metadata
5. Export individual story functions (e.g., export const Primary = (args) => <Button {...args} />) that accept args for interactive controls
6. Add args to each story export to set default prop values that appear in the Storybook UI
7. Run npm run storybook (or yarn storybook) to start the dev server on http://localhost:6006
8. Install @storybook/addon-essentials if not included, then add it to the addons array in .storybook/main.js for built-in controls, docs, and actions panels

Code

// src/Button.stories.jsx
import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'danger'],
      description: 'Button style variant',
    },
    size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
    },
    onClick: {
      action: 'clicked',
      description: 'Callback when button is clicked',
    },
    disabled: {
      control: 'boolean',
    },
    children: {
      control: 'text',
    },
  },
  tags: ['autodocs'],
};

export const Primary = {
  args: {
    variant: 'primary',
    size: 'medium',
    children: 'Primary Button',
    disabled: false,
  },
};

export const Secondary = {
  args: {
    variant: 'secondary',
    size: 'medium',
    children: 'Secondary Button',
    disabled: false,
  },
};

export const Danger = {

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change