← スキル一覧に戻る
integrating-storybook
by thkt
⭐ 3🍴 0📅 2026年1月24日
Manusで実行SKILL.md
name: integrating-storybook description: > Storybook integration with spec.md. Auto-generates Stories from Component API. Use when creating Storybook stories, defining component APIs, or when user mentions storybook, stories, props, argTypes, variants, CSF3. allowed-tools: [Read, Write, Glob, Grep] user-invocable: false
Storybook Integration
Core Concepts
| Concept | Description |
|---|---|
| Component API | Props, Variants, States defined in spec.md |
| CSF3 | Component Story Format 3 + autodocs |
| Auto-generation | /code generates Stories from spec.md |
Component API Location
Add to spec.md when implementing frontend components.
| Content | Description |
|---|---|
| Props Interface | TypeScript interface |
| Variants | Style options |
| States | default, hover, active, disabled |
| Usage Examples | TSX code |
Workflow
| Command | Action |
|---|---|
/think "Add Button" | Adds Component API section to spec.md |
/code | Generates Button.stories.tsx from spec |
Existing Stories Handling
| Option | Action |
|---|---|
| [O] | Overwrite existing file |
| [S] | Skip - keep existing |
| [M] | Merge - show diff, manual |
| [D] | Diff only - append new |
References
| Topic | File |
|---|---|
| Component API | references/component-api-template.md |
| CSF3 Patterns | references/csf3-patterns.md |
スコア
総合スコア
50/100
リポジトリの品質指標に基づく評価
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
○最近の活動
3ヶ月以内に更新がある
0/10
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
○タグ
1つ以上のタグが設定されている
0/5
レビュー
💬
レビュー機能は近日公開予定です