dss/dss-claude-plugin/skills/storybook-integration/SKILL.md

name, description, globs, alwaysApply

name	description	globs	alwaysApply
Storybook Integration	Set up and configure Storybook for design system documentation and development	**/.storybook/** **/*.stories.tsx **/*.stories.jsx **/*.stories.mdx **/storybook-static/**	false

Storybook Integration

Overview

This skill helps set up, configure, and generate Storybook stories for design system components. It creates comprehensive documentation and interactive examples.

When to Use

Use this skill when the user asks to:

• Set up Storybook for a project
• Generate stories for components
• Configure Storybook theme
• Create component documentation
• Add Storybook addons

Capabilities

1. Story Generation

• Automatic story creation from components
• Props documentation extraction
• Default story with all props
• Variant stories for different states

2. Theme Configuration

• Design token integration
• Light/dark mode themes
• Custom branding
• Typography setup

3. Addon Configuration

• Controls for prop editing
• Actions for event logging
• Viewport for responsive testing
• Accessibility testing

4. Documentation

• MDX documentation pages
• Component API tables
• Usage examples
• Design guidelines

Workflow

1. Scan Existing Setup

   Use dss_setup_storybook with action: scan
   

2. Generate Stories

   Use dss_setup_storybook with action: generate
   

3. Configure Theme

   Use dss_setup_storybook with action: configure
   

4. Review and Refine

   • Check generated stories
   • Add custom documentation
   • Configure addons

Example Interaction

User: "Set up Storybook for my design system components"

Assistant Response:

I'll help you set up Storybook for your design system.

[Uses dss_setup_storybook with action: scan]

**Current Status:**
- Storybook: Not installed
- Components found: 23
- Existing stories: 0

Let me set up Storybook with your design tokens.

[Uses dss_setup_storybook with action: configure]

**Storybook Configuration Created:**

.storybook/main.js:
```javascript
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-links'
  ],
  framework: '@storybook/react'
};

.storybook/preview.js:

import { themes } from '@storybook/theming';
import '../src/styles/tokens.css';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: { expanded: true },
  docs: {
    theme: themes.light
  }
};

Now generating stories for your components...

[Uses dss_setup_storybook with action: generate]

Stories Generated:

• Button.stories.tsx (4 variants)
• Card.stories.tsx (3 variants)
• Input.stories.tsx (5 variants)
• Modal.stories.tsx (2 variants)

Run npm run storybook to see your component library!

## Story Template

```tsx
// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost']
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg']
    }
  }
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Click me'
  }
};

export const Secondary: Story = {
  args: {
    variant: 'secondary',
    children: 'Click me'
  }
};

Configuration Options

Theme Branding

// .storybook/theme.js
import { create } from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'My Design System',
  brandUrl: 'https://example.com',
  brandImage: '/logo.svg',

  // UI colors from tokens
  colorPrimary: '#0066cc',
  colorSecondary: '#6c757d',

  // Typography
  fontBase: '"Inter", sans-serif',
  fontCode: 'monospace'
});

Related Tools

• dss_setup_storybook - Main Storybook tool
• dss_generate_theme - Generate theme for Storybook
• dss_audit_components - Find components to document

Server Configuration

DSS Storybook runs on port 6006 by default:

• Host: 0.0.0.0 (configurable)
• Port: 6006 (configurable)
• Auto-open: disabled by default

Best Practices

1. Story Organization

   • Group by component category
   • Use consistent naming
   • Include edge cases

2. Documentation

   • Write clear descriptions
   • Show usage examples
   • Document props thoroughly

3. Maintenance

   • Update stories with components
   • Test in CI/CD
   • Review accessibility regularly