#What it does

The /storybook skill reads your component's props, types, and usage patterns to generate complete Storybook stories. It creates stories for every meaningful variant and state -- default, hover, disabled, loading, error, empty -- so your component library is always documented and visually testable.

#How to use

/storybook src/components/Button.tsx

Point it at a single component, a directory of components, or run without arguments to generate stories for all undocumented components.

#What it generates

• Default story -- The component rendered with its most common props
• Variant stories -- One story per visual variant (size, color, style)
• State stories -- Loading, disabled, error, and empty states
• Interactive controls -- Storybook args and argTypes for every prop so reviewers can experiment in the browser
• Composition stories -- The component used inside realistic layouts with sibling components
• Accessibility annotations -- ARIA role documentation and keyboard interaction notes

#Workflow

1. Parse -- Reads the component file and its TypeScript interface or PropTypes
2. Analyze -- Scans the codebase for real usage examples to understand common prop combinations
3. Generate -- Creates a .stories.tsx file with comprehensive coverage
4. Validate -- Runs storybook build to verify all stories render without errors

#Example

> /storybook src/components/Button.tsx
 
## Generated: Button.stories.tsx
 
Stories created:
  - Default
  - Primary / Secondary / Ghost variants
  - Small / Medium / Large sizes
  - With icon (leading / trailing)
  - Loading state
  - Disabled state
  - Full width
  - As link (anchor tag)
 
Controls configured for: variant, size, disabled,
  loading, icon, children, onClick
 
File: src/components/Button.stories.tsx (ready)