storybook-story-generation

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.