storybook-component-documentation

What problem does it solve?

This Skill standardizes the creation and maintenance of Storybook stories for React components, enabling consistent documentation and visual testing across a design system.

Core Features & Use Cases

• Basic Story Structure: Provide a template naming convention like ComponentName.stories.tsx with proper Meta/StoryObj typings.
• Story Variants: Create stories for different component states such as primary, secondary, disabled, and loading.
• Interactive Args & Controls: Define argTypes to enable interactive controls in Storybook for props like color, size, and label.
• Actions for Event Handlers: Use Storybook actions to log interactions like onClick and onChange.
• Play Functions: Add play functions to automate interaction tests within Storybook.
• Decorators for Context: Wrap stories with providers or layouts to simulate real usage.

Quick Start

Create a new story for a component by naming it ComponentName.stories.tsx and following the Basic Story Structure and examples provided.