mcpField
S
storybook-init

storybook-init

github.com/storybookjs開発91.4k43 回インストール今日更新
リポジトリ

storybook-init について

Storybook の初期化を支援するスキルです。既存の導入状況と最新安定版を確認し、適切なインストールコマンドを選んで `/storybook-setup` による設定へ進みます。

主な機能

  1. 01Storybook 導入済みか確認
  2. 02最新安定版の確認
  3. 03適切な create-storybook タグの選択
  4. 04`/storybook-setup` の呼び出し

活用シーン

  1. 01Storybook の重複インストール回避
  2. 02新規プロジェクトでの Storybook 導入
  3. 03プロジェクト固有の Storybook 設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/storybookjs/storybook --skill storybook-init

インストール後、Claude Code で/storybook-initを入力して読み込まれたか確認します。

詳細

Storybook がすでにインストールされている場合(package.json に storybook 依存関係がある、または .storybook/ ディレクトリがある場合)は、再インストールせず、/storybook-setup に切り替えてください。

  1. まず、npm view create-storybook version を実行して最新の安定版を確認してください。11.0 未満の場合は、11.0 のアルファ版を使用するため、プロジェクトのルートディレクトリで npm create storybook@next を実行してください。それ以外の場合は、npm create storybook@latest を実行してください。必要に応じて、pnpm create storybook@next のように、同じタグを使った対応するパッケージマネージャーのコマンドを使用してください。
  2. /storybook-setup スキルを呼び出して、.storybook/preview.ts ファイルなど、プロジェクト固有の Storybook 設定をユーザーが行えるよう支援してください。

コメント