# Storybook Generator

> Storybook Generator

- Skill: `uitbreidenos/storybook-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add uitbreidenos/storybook-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/uitbreidenos/storybook-generator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: UitbreidenOS (https://skillmd.com/u/uitbreidenos)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/uitbreidenos/storybook-generator

---

# Storybook Generator

## When to activate

User runs `/generate-storybook` or requests Storybook story generation for a component with all prop variants and interactive controls.

## When NOT to use

- Component audits (use `/component-auditor` instead)
- Accessibility reviews (use `/review-a11y` instead)
- Existing well-documented Storybook stories (update instead)

## Instructions

1. **Analyze component props**
   - Extract all props and their types (required vs. optional)
   - Identify variant combinations (size, color, state, etc.)
   - Map props to Storybook controls (boolean, select, text, etc.)

2. **Generate story template**
   - Meta export with component, title, and controls config
   - Default story showing primary variant
   - Variant stories for each meaningful combination (Size, Variant, State, etc.)
   - Edge case stories (empty state, error state, loading state)

3. **Add interactive controls**
   - Boolean controls for toggles (disabled, loading, etc.)
   - Select controls for variants (size: small/medium/large)
   - Text controls for content
   - Suggest control groups (e.g., "Button" group for size + variant)

4. **Document usage examples**
   - Show primary use case
   - Show edge cases
   - Add JSDoc comments for prop descriptions
   - Include accessibility notes if relevant

5. **Export story code**
   - TypeScript with proper types
   - Modern Storybook CSF 3.0+ syntax
   - Ready to commit without modification

## Example

User: "Generate Storybook for this Button component."

Response generates:
```
export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    size: { control: 'select', options: ['small', 'medium', 'large'] },
    variant: { control: 'select', options: ['primary', 'secondary', 'outline'] },
    disabled: { control: 'boolean' },
    children: { control: 'text' },
  },
};

export const Primary = { args: { variant: 'primary', children: 'Click me' } };
export const Secondary = { args: { variant: 'secondary', children: 'Click me' } };
export const Disabled = { args: { disabled: true, children: 'Click me' } };
export const AllSizes = { render: () => <div>...</div> };
```