Generate Component Story

The generate-component-story skill creates comprehensive Storybook stories for UI components, automatically generating the necessary metadata and boilerplate code to enable interactive documentation. It streamlines the workflow of setting up component libraries by handling repetitive setup tasks and ensuring consistent story formatting across a project.

When to use it

• You need to quickly generate initial Storybook files for new React or Vue components without manual configuration.
• Your team requires standardized story templates that include proper metadata, decorators, and parameter controls.
• You are refactoring an existing component library and want to update all stories with a single command.
• You want to ensure every component in your repository has accompanying documentation ready for immediate use.

Key capabilities

• Automatically generates Storybook stories based on existing component code.
• Produces valid metadata and boilerplate structure required by Storybook.
• Supports common UI frameworks to create interactive, testable component instances.
• Reduces manual effort in setting up component documentation environments.

Example prompts

• "Generate a Storybook story for my Button component with primary, secondary, and danger variants."
• "Create stories for a Card component including props for title, image, and action buttons."
• "Set up interactive stories for a FormInput component with validation states and error messages."

Tips & gotchas

Ensure your components follow standard naming conventions and export structures to maximize story generation accuracy. Review generated stories manually to verify that all interactive features and edge cases are properly represented before committing them to your repository.