# Integrating Storybook

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

- Skill: `majiayu000/integrating-storybook` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/integrating-storybook`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/integrating-storybook/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/integrating-storybook

---


# 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`          |