design-system-storybook

What problem does it solve?

This Skill automates the tedious and repetitive task of creating Storybook stories and comprehensive Markdown documentation for design system components. It ensures consistency, saves developer time, and improves component discoverability and usability across development teams.

Core Features & Use Cases

• Automated Storybook Generation: Creates .stories.tsx files with default, variant, size, state, and interactive stories based on component props, compatible with Storybook 7.x+.
• Comprehensive Documentation: Generates .md files including overview, installation, props API, variants, examples, accessibility guidelines, and design principles.
• Component Analysis: Automatically parses component files (e.g., TypeScript interfaces) to understand props, variants, and default values for accurate generation.
• Use Case: A UI developer creates a new Button component for their design system. They use this Skill to instantly generate a full suite of Storybook stories covering all button states and variants, along with a detailed Markdown document for other developers and designers, ensuring clear usage and accessibility.

Quick Start

To generate Storybook stories and documentation for a component, provide its code or path: "Button 컴포넌트에 Storybook 추가해줘" Or: "이 컴포넌트 문서화해줘"