Agent skill
integrating-storybook
spec.mdとのStorybook統合。Component APIからStoriesを自動生成。 トリガー: storybook, stories, component api, props, argTypes, variants, csf, csf3, autodocs, frontend component
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/design/integrating-storybook-thkt-claude-config
SKILL.md
Storybook統合
目的
spec.mdのComponent API仕様からStoriesスケルトンを自動生成。
コアコンセプト
| コンセプト | 説明 |
|---|---|
| Component API | spec.mdで定義されたProps、Variants、States |
| CSF3 | Component Story Format 3 + autodocs |
| 自動生成 | /codeがspec.mdからStoriesを生成 |
Component APIセクション（spec.md内）
/thinkがフロントエンド機能を検出すると自動追加。
場所: ## 4. UI仕様内の### 4.x Component API: [ComponentName]
内容:
- Propsインターフェース（TypeScript）
- Variants（size、color、state）
- States（default、hover、disabled、loading）
- 使用例
ワークフロー
| コマンド | アクション |
|---|---|
/think "Add Button" |
spec.mdにComponent APIセクションを追加 |
/code |
specからButton.stories.tsxを生成 |
既存Storiesとの統合
Storiesファイルが存在する場合:
| オプション | アクション |
|---|---|
| [O] 上書き | 既存ファイルを置き換え |
| [S] スキップ | 既存ファイルを維持 |
| [M] マージ | diffを表示、手動統合 |
| [D] diffのみ | 新しいStoriesのみ追加 |
フロントエンド検出キーワード
Component API生成をトリガー:
- component, ui, button, form, modal, dialog, card, list, table
参照
- @./references/component-api-template.md - Props/Variantsテンプレート
- @./references/csf3-patterns.md - CSF3パターン
- Storybook Docs
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?