How do I install the Integrating Storybook skill?

Run npx skillmds@latest add majiayu000/integrating-storybook in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Integrating Storybook safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Integrating Storybook?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Integrating Storybook free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Integrating Storybook?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Integrating Storybook by majiayu000

Name: Integrating Storybook
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

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`

---name: integrating-storybookdescription: Storybook integration with spec.md. Auto-generates Stories from Component API. Triggers: storybook, stories, component api, props, argTypes, variants, csf3.--- # 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` |

Frequently asked questions

Integrating Storybook