integrating-storybook

Storybook integration with spec.md. Auto-generates Stories from Component API. Triggers: storybook, stories, component api, props, argTypes, variants, csf3.

Stars 163

Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/integrating-storybook

SKILL.md

Storybook統合

コアコンセプト

コンセプト	説明
Component API	spec.mdで定義されたProps、Variants、States
CSF3	Component Story Format 3 + autodocs
自動生成	`/code`がspec.mdからStoriesを生成

Component API場所

フロントエンドコンポーネント実装時にspec.mdへ追加。

内容	説明
Propsインターフェース	TypeScriptインターフェース
Variants	スタイルオプション
States	default, hover, active, disabled
使用例	TSXコード

ワークフロー

コマンド	アクション
`/think "Add Button"`	spec.mdにComponent APIセクションを追加
`/code`	specから`Button.stories.tsx`を生成

既存Storiesの処理

オプション	アクション
[O]	既存ファイルを上書き
[S]	スキップ - 既存を維持
[M]	マージ - diff表示、手動
[D]	diffのみ - 新規を追加

参照

トピック	ファイル
Component API	`references/component-api-template.md`
CSF3パターン	`references/csf3-patterns.md`