Agent skill
integrating-storybook
Storybook integration with spec.md. Auto-generates Stories from Component API. Triggers: storybook, stories, component api, props, argTypes, variants, csf3.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/integrating-storybook-thkt-claude-config
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 |
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?