jpskill.com
✍️ ライティング コミュニティ

storybook

Storybookを使ってUIコンポーネントを個別に開発、ドキュメント化、テストするのを支援し、コンポーネントのストーリー作成や、見た目のテスト設定、拡張機能の構成、ドキュメント生成などを効率化するSkill。

📜 元の英語説明(参考)

Assists with developing, documenting, and testing UI components in isolation using Storybook. Use when writing component stories, setting up visual regression testing, configuring addons, or generating component documentation. Trigger words: storybook, stories, csf, component story format, visual testing, chromatic, storybook addons.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Storybookを使ってUIコンポーネントを個別に開発、ドキュメント化、テストするのを支援し、コンポーネントのストーリー作成や、見た目のテスト設定、拡張機能の構成、ドキュメント生成などを効率化するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o storybook.zip https://jpskill.com/download/15422.zip && unzip -o storybook.zip && rm storybook.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15422.zip -OutFile "$d\storybook.zip"; Expand-Archive "$d\storybook.zip" -DestinationPath $d -Force; ri "$d\storybook.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して storybook.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → storybook フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Storybook

概要

Storybook は、UIコンポーネントを分離した状態で開発、ドキュメント化、テストするための UI コンポーネントワークショップです。React、Vue、Svelte、Angular をサポートしており、Component Story Format (CSF)、インタラクティブなコントロール、アクセシビリティ監査、Chromatic 連携によるビジュアルリグレッションテストが可能です。

手順

  • ストーリーを作成する際は、コンポーネントのメタデータに対してデフォルトのエクスポート、各バリアント（Primary、Secondary、Loading、Error、Disabled）に対して名前付きのエクスポートを行う Component Story Format (CSF) を使用します。
  • ストーリーをインタラクティブにする際は、すべての動的な props に args を使用して Controls パネルを有効にし、自動インタラクションテストのために @storybook/test で play 関数を追加します。
  • ドキュメントを追加する際は、ストーリーから自動生成するための autodocs タグを使用するか、<Canvas>、<Controls>、<ArgTypes> のようなドキュメントブロックを使用して文章とライブコンポーネントの例を組み合わせるための MDX ファイルを使用します。
  • アクセシビリティをテストする際は、すべてのストーリーで axe-core 監査を自動的に実行する @storybook/addon-a11y を有効にします。
  • ビジュアルリグレッションを設定する際は、PR 全体でスクリーンショットを比較するために Chromatic または Percy を統合し、すべての play 関数を実行するために CI で @storybook/test-runner を実行します。
  • グローバルに設定する際は、すべてのストーリーに適用するために、共有デコレータ（ThemeProvider、RouterProvider）とパラメータを .storybook/preview.ts で設定します。
  • 整理する際は、title: "Components/Forms/Input" でサイドバーの階層を使用し、ストーリーをコンポーネントと同じ場所に配置します（Button.tsx + Button.stories.tsx）。

例

例 1: ストーリー付きのコンポーネントライブラリを構築する

ユーザーリクエスト: "すべてのバリアントを含む React コンポーネントライブラリのために Storybook をセットアップしてください"

アクション:

  1. React Vite フレームワークのために npx storybook@latest init で Storybook を初期化します
  2. バリアント、サイズ、disabled、loading の状態のための args を使用して、各コンポーネントのストーリーを作成します
  3. インタラクティブなコンポーネント（ボタン、フォーム、モーダル）のために play 関数を追加します
  4. 自動ドキュメント生成のために autodocs を設定します

出力: インタラクティブなコントロールと自動生成されたドキュメントを備えた、閲覧可能なコンポーネントカタログ。

例 2: ビジュアルリグレッションテストを CI に追加する

ユーザーリクエスト: "CI での Storybook コンポーネントのビジュアルテストをセットアップしてください"

アクション:

  1. @storybook/test-runner をインストールし、CI パイプラインを設定します
  2. アクセシビリティチェックのために @storybook/addon-a11y を追加します
  3. 各 PR でのビジュアルリグレッションのスクリーンショットのために Chromatic を統合します
  4. ヘッドレス Playwright で全ての play 関数を実行するように test-runner を設定します

出力: ビジュアルリグレッション、アクセシビリティの問題、および壊れたインタラクションをキャッチする CI パイプライン。

ガイドライン

  • コンポーネントのバリアントごとに少なくとも 1 つのストーリーを作成します: default、loading、error、disabled、および empty の状態。
  • Controls パネルとストーリーの構成を有効にするために、すべての動的な props に args を使用します。
  • ストーリーをコンポーネントの隣に配置します: 同じディレクトリ内の Button.tsx + Button.stories.tsx。
  • インタラクティブなコンポーネント（ボタン、フォーム、モーダル、およびドロップダウン）のために play 関数を追加します。
  • プレビューレベルで共有コンテキスト（ThemeProvider、RouterProvider）のためにデコレータを使用します。
  • 各バリアントをいつ使用するか、やるべきこととやってはいけないことを MDX でドキュメント化します。
  • マージ前に壊れたインタラクションをキャッチするために、CI で storybook test-runner を実行します。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Storybook

Overview

Storybook is a UI component workshop for developing, documenting, and testing components in isolation. It supports React, Vue, Svelte, and Angular with Component Story Format (CSF), interactive controls, accessibility auditing, and visual regression testing through Chromatic integration.

Instructions

  • When writing stories, use Component Story Format (CSF) with a default export for component metadata and named exports for each variant (Primary, Secondary, Loading, Error, Disabled).
  • When making stories interactive, use args for all dynamic props to enable the Controls panel, and add play functions with @storybook/test for automated interaction testing.
  • When adding documentation, use autodocs tag for automatic generation from stories, or MDX files for combining prose with live component examples using doc blocks like <Canvas>, <Controls>, and <ArgTypes>.
  • When testing accessibility, enable @storybook/addon-a11y which runs axe-core audits on every story automatically.
  • When setting up visual regression, integrate Chromatic or Percy for screenshot comparison across PRs, and run @storybook/test-runner in CI to execute all play functions.
  • When configuring globally, set shared decorators (ThemeProvider, RouterProvider) and parameters in .storybook/preview.ts to apply to all stories.
  • When organizing, use sidebar hierarchy with title: "Components/Forms/Input" and keep stories co-located with components (Button.tsx + Button.stories.tsx).

Examples

Example 1: Build a component library with stories

User request: "Set up Storybook for our React component library with all variants"

Actions:

  1. Initialize Storybook with npx storybook@latest init for the React Vite framework
  2. Write stories for each component with args for variant, size, disabled, and loading states
  3. Add play functions for interactive components (buttons, forms, modals)
  4. Configure autodocs for automatic documentation generation

Output: A browsable component catalog with interactive controls and auto-generated docs.

Example 2: Add visual regression testing to CI

User request: "Set up visual testing for our Storybook components in CI"

Actions:

  1. Install @storybook/test-runner and configure CI pipeline
  2. Add @storybook/addon-a11y for accessibility checks
  3. Integrate Chromatic for visual regression screenshots on each PR
  4. Configure the test-runner to execute all play functions in headless Playwright

Output: A CI pipeline that catches visual regressions, accessibility issues, and broken interactions.

Guidelines

  • Write at least one story per component variant: default, loading, error, disabled, and empty states.
  • Use args for all dynamic props to enable the Controls panel and story composition.
  • Keep stories next to components: Button.tsx + Button.stories.tsx in the same directory.
  • Add play functions for interactive components: buttons, forms, modals, and dropdowns.
  • Use decorators for shared context (ThemeProvider, RouterProvider) at the preview level.
  • Document design decisions in MDX: when to use each variant, dos and don'ts.
  • Run storybook test-runner in CI to catch broken interactions before merge.