← スキル一覧に戻る
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. Triggers: storybook, stories, component api, props, argTypes, variants, csf3. allowed-tools: [Read, Write, Glob, Grep]
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 |
スコア
総合スコア
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
レビュー
💬
レビュー機能は近日公開予定です