Claude-skill-registry integrating-storybook

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/integrating-storybook" ~/.claude/skills/majiayu000-claude-skill-registry-integrating-storybook && rm -rf "$T"
manifest: skills/data/integrating-storybook/SKILL.md
source content

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セクションを追加
/code
specから
Button.stories.tsx
を生成

既存Storiesの処理

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

参照

トピックファイル
Component API
references/component-api-template.md
CSF3パターン
references/csf3-patterns.md