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.

주요 기능

01Support for Component Story Format 3 (CSF3) and autodocs

02Flexible integration workflows including overwrite, merge, and diff options

033 GitHub stars

04Intelligent frontend detection for components, buttons, and forms

05Comprehensive mapping of props, variants, and component states

06Automatic Storybook story generation from spec.md Component APIs

사용 사례

01Rapidly scaffolding a design system with documented UI components

02Automating the creation of component playgrounds for designer-developer handoff

03Maintaining consistent Storybook documentation during iterative UI development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add thkt/claude-config integrating-storybook

For use in Claude.ai and ChatGPT

Download Skill