What problem does it solve?
Manually writing Storybook stories and component documentation for React components is time-consuming and error-prone, especially after building multiple components from design pipelines or when backfilling coverage for existing component libraries.
Core Features & Use Cases
- AST-Powered Prop Extraction: Uses ts-morph to parse TypeScript component source code and reliably extract prop types, default values, JSDoc comments, and callback props without fragile regex matching.
- Automated CSF3 Story Generation: Creates .stories.tsx files with autodocs tags, prop-aware argTypes and controls, default stories, variant stories for string-literal unions and booleans, and action args for event callbacks.
- Automated MDX Documentation: Generates autodocs .mdx pages with Meta, Canvas, Controls, and ArgTypes blocks, plus JSDoc descriptions and variant canvases.
- Use Case: After running a Figma-to-React build pipeline that generates dozens of UI components, use this skill to automatically create full Storybook coverage with zero manual story authoring.
Quick Start
Use the storybook-story-generation skill to auto-generate Storybook stories and MDX documentation for all built React components in your project.
