| name | integrating-storybook |
| description | Storybook integration with spec.md. Auto-generates Stories from Component API. Triggers: storybook, stories, component api, props, argTypes, variants, csf3.
|
| allowed-tools | Read, Write, Glob, Grep |
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 |