skills.rest
thkt
thktCOMMUNITY
Explore all skills by this author →
GitHub

integrating-storybook

Generate CSF3-compliant Stories skeletons from spec.md component API definitions.

11|1|Updated Aug 6, 2025
Search Tags:#Storybook#autodocs#CSF3#component API#spec.md
One-click install
npx skills add https://github.com/thkt/claude-config --skill integrating-storybook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integrating-storybook
Source: https://github.com/thkt/claude-config/tree/main/ja/skills/integrating-storybook
Command: npx skills add https://github.com/thkt/claude-config --skill integrating-storybook

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

spec.mdのComponent APIから自動的にStoriesを生成し、CSF3/autodocsと連携して、フロントエンド開発の設計と実装をつなぎます。

Core Features & Use Cases

  • Component APIセクションをspec.mdへ追加する機能
  • CSF3ベースのStoriesテンプレート生成
  • argTypesへの型変換と autodocs 連携

Quick Start

/code 実行後、spec.mdのAPI定義から Button.stories.tsx が自動生成されます。

Frequently Asked Questions about integrating-storybook

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automatically generate Storybook stories from component specifications?▼

Generate Storybook stories automatically by defining your component API in spec.md, then use the /code trigger to produce CSF3-compliant [ComponentName].stories.tsx files with autodocs integration and argTypes mappings from your prop definitions.

Can I use Storybook autodocs with CSF3 and component prop specifications?▼

Yes. CSF3 supports autodocs, which automatically generates documentation from component props. This Skill bridges spec.md prop definitions to CSF3 argTypes, enabling autodocs to render your component API directly in Storybook.

How do I structure component API specifications in spec.md for story generation?▼

Define a Component API section in spec.md with Props, Variants, States, and Usage Examples. The Skill extracts these definitions and maps them to CSF3 argTypes, generating stories that cover all specified variants and states.

What's the workflow for connecting frontend component design to Storybook implementation?▼

Document your component design in spec.md with a Component API section, then trigger /code to generate stories. This connects design intent to CSF3 stories with autodocs, eliminating manual story skeleton creation for Props-to-argTypes alignment.

Do I need to manually write Storybook stories if I have component specifications?▼

No. With prop definitions, variants, and states documented in spec.md, the Skill generates CSF3 story skeletons automatically, reducing boilerplate while maintaining Component API template alignment and autodocs coverage.

Related Skills

Explore More Software Engineering Skills→
launchapp-devlaunchapp-dev
38

component-spec

Generate structured component specifications with anatomy, variants, props, states, and accessibility.

Official
Advanced
xtonextone
3

nextjs-react-implementation

Generate Next.js/React components with TS types, Tailwind styling, Vitest, and Storybook from design specs.

Official
Advanced
exceptionlessexceptionless
2.5k

storybook

Create and update Storybook stories for Svelte components with CSF and autodocs.

Official
Intermediate
PMDevSolutionsPMDevSolutions
7

storybook-story-generation

Generate CSF3 Storybook stories and MDX autodocs from React component source.

Official
Advanced