Logoskills for everything
Agent Skill
2/7/2026

integrating-storybook

spec.mdとのStorybook統合。Component APIからStoriesを自動生成。 Storybookストーリーの作成、コンポーネントAPIの定義、または storybook, stories, props, argTypes, variants, CSF3 に言及した時に使用。

T
thkt
4GitHub Stars
1Views
npx skills add thkt/claude-config

SKILL.md

Nameintegrating-storybook
Descriptionspec.mdとのStorybook統合。Component APIからStoriesを自動生成。 Storybookストーリーの作成、コンポーネントAPIの定義、または storybook, stories, props, argTypes, variants, CSF3 に言及した時に使用。

name: integrating-storybook description: > spec.mdとのStorybook統合。Component APIからStoriesを自動生成。 Storybookストーリーの作成、コンポーネントAPIの定義、または storybook, stories, props, argTypes, variants, CSF3 に言及した時に使用。 allowed-tools: [Read, Write, Glob, Grep] user-invocable: false

Storybook統合

コアコンセプト

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

Component APIの配置場所

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

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

ワークフロー

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

既存Storiesの処理

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

参照

トピックファイル
Component APIreferences/component-api-template.md
CSF3パターンreferences/csf3-patterns.md
Skills Info
Original Name:integrating-storybookAuthor:thkt
Download
View on GitHub