---
name: dss-storybook
description: Set up and configure Storybook for design system components
arguments:
  - name: action
    description: "Action to perform: scan, generate, or configure"
    required: true
  - name: path
    description: Path to project directory
    required: false
---

# DSS Storybook Command

Set up, configure, and generate Storybook stories for design system documentation.

## Usage

```
/dss-storybook <action> [path]
```

Examples:
```
/dss-storybook scan
/dss-storybook generate ./src/components
/dss-storybook configure
```

## Actions

| Action | Description |
|--------|-------------|
| scan | Scan for existing Storybook setup and components |
| generate | Generate stories for components |
| configure | Configure Storybook theme with design tokens |

## What This Does

### Scan
- Checks for existing Storybook installation
- Finds components without stories
- Reports Storybook configuration status

### Generate
- Creates story files for components
- Generates prop documentation
- Creates variant stories

### Configure
- Sets up Storybook theme
- Integrates design tokens
- Configures addons

## Instructions for Claude

When the user runs this command:

1. Validate action is valid (scan, generate, configure)
2. Use `dss_setup_storybook` tool with action and path
3. Present results based on action:

**For scan:**
- Show Storybook status
- List components with/without stories
- Recommend next steps

**For generate:**
- Show generated story files
- Display story code
- Provide usage instructions

**For configure:**
- Show configuration changes
- Display theme setup
- Provide run instructions

## Example Output

### Scan
```
Storybook Scan: /path/to/project

STATUS
- Storybook installed: Yes (v7.6.0)
- Stories found: 12
- Components without stories: 8

MISSING STORIES
- Accordion.tsx
- Avatar.tsx
- Badge.tsx
- Dropdown.tsx
- Pagination.tsx
- Progress.tsx
- Tabs.tsx
- Toast.tsx

Run /dss-storybook generate to create stories
```

### Generate
```
Storybook Story Generation

GENERATED STORIES

Button.stories.tsx:
- Primary variant
- Secondary variant
- Disabled state
- Loading state
- With icon

Card.stories.tsx:
- Default
- With image
- Interactive

Input.stories.tsx:
- Default
- With label
- With error
- Disabled

Run: npm run storybook
```

### Configure
```
Storybook Configuration

CONFIGURATION CREATED

.storybook/theme.js:
- Brand colors from tokens
- Typography from tokens
- Custom logo support

.storybook/preview.js:
- Token CSS imported
- Global decorators added
- Controls configured

Run: npm run storybook
Access: http://localhost:6006
```