How does the skill detect when to create a story?

It triggers automatically when frontend keywords like 'component', 'ui', 'button', or 'form' are detected during the /think process.

What is the primary source for the generated stories?

The skill uses the Component API section within your spec.md file to extract props, variants, and states as the source of truth.

Does it support the latest Storybook standards?

Yes, it generates stories using the modern Component Story Format 3 (CSF3) standard, including support for autodocs.

Can I merge new stories with existing files?

Yes, the skill provides Overwrite, Skip, Merge, and Diff options when an existing story file is detected.

What file types does this skill generate?

The skill is optimized for TypeScript and typically generates .stories.tsx files based on your Component API definitions.

Storybook Integration

Name: Storybook Integration
Author: thkt

bythkt

•

デザインツール

Automates the generation of Storybook stories directly from component specifications to accelerate frontend development.

概要

This skill bridges the gap between design specifications and frontend development by auto-generating Storybook CSF3 story skeletons from component APIs defined in your project's spec.md file. It monitors for frontend-related keywords to automatically suggest component structures, handles props, variants, and states, and provides flexible options for merging with existing story files, ensuring your UI documentation and playground stay in sync with your codebase.

主な機能

Support for Component Story Format 3 (CSF3) and autodocs
Flexible integration workflows including overwrite, merge, and diff options
3 GitHub stars
Intelligent frontend detection for components, buttons, and forms
Comprehensive mapping of props, variants, and component states
Automatic Storybook story generation from spec.md Component APIs

ユースケース

Rapidly scaffolding a design system with documented UI components
Automating the creation of component playgrounds for designer-developer handoff
Maintaining consistent Storybook documentation during iterative UI development

概要

主な機能

Support for Component Story Format 3 (CSF3) and autodocs
Flexible integration workflows including overwrite, merge, and diff options
3 GitHub stars
Intelligent frontend detection for components, buttons, and forms
Comprehensive mapping of props, variants, and component states
Automatic Storybook story generation from spec.md Component APIs

ユースケース

Rapidly scaffolding a design system with documented UI components
Automating the creation of component playgrounds for designer-developer handoff
Maintaining consistent Storybook documentation during iterative UI development