sb-explore について
sb-exploreは、Storybookコンポーネントを隔離環境で反復するスキルです。新規開発や既存コンポーネントの再設計に取り組むチーム向けで、実験を本番コードから分離し、条件を満たした後はsb-shipへ引き継ぎます。
主な機能
- 01本番コンポーネントの外で反復
- 02プロジェクト設定に沿った実験配置
- 03Figmaデザインとの関連付け
- 044つの基準による昇格判定
- 05実験を保持してsb-shipへ引き継ぎ
活用シーン
- 01本番コード外で新しいコンポーネントを試作
- 02既存コンポーネントの再設計を反復
- 03Figmaのフレームに合わせて実験を調整
- 04昇格条件を満たすか確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ strongeron/ storybook-workbench --skill sb-exploreインストール後、Claude Code で/sb-exploreを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
CONTEXT.mdagents/openai.yamlreferences/figma-to-storybook.mdlabs-workflow.md詳細
sb-explore — サンドボックスでの反復(ビルドモード:Explore)
コンポーネントは新規作成、または再設計の途中です。src/components/ の外に置くことで、本番コードから依存されないようにします。足場を作る前に、references/labs-workflow.md を読み込んでください。
ユーザーが Figma URL を貼り付けた場合は、さらに references/figma-to-storybook.md を読み込んでください。composition-patterns.md は読み込まないでください(Compare → sb-wrappers で使用します)。
命名:
Exploreは、このスキル全体(タイトル、ディスクパス、タグ)で使う正式な用語です。references/labs-workflow.mdは名称変更前のもので、Labs/src/stories/labs/と記載されています。同じトラック(Explore = Labs)を指すものとして読んでください。既存のリポジトリで見かけることのある旧称としてLabsを扱い、作成時にはExploreを使用してください。
足場を作る前に(確認すること)
- リリース済みコンポーネントの反復作業か、新規作成か? Ship 時に Path A と Path B のどちらに進むかが決まります。
- Figma URL が貼り付けられているか? 貼り付けられている場合は、すぐに
parameters.design = { type: 'figma', url }を設定し、フレームを基準に反復してください(figma-to-storybook.md を参照)。 - API は卒業できるほど安定しているか? labs-workflow.md の 4 つの基準を参照してください。満たしていない場合は Explore を続けてください。
足場を作る
- ディスクパス — 記録済みの
storiesLocation(.storybook/audit/status.md)に従います。ストーリーが分離されている場合(監査/クライアントのデフォルト)、実験用のファイルは.storybook/explore/<topic>/に作成し、所有していないsrc/に散在させないでください。ユーザーが所有するプロジェクトで同居を選択した場合に限り、src/explore/<topic>/を使用してください。Vite はどちらも本番バンドルから除外します。 - タイトル —
Explore/<topic>/<name>—storySort.orderの最後に配置され、サイドバーの一番下に表示されます。 - タグ —
['explore', '!autodocs', '!test']。任意:'motion'、'figma-sync'、'v2-preview'。
卒業ゲート(Explore → Component)
labs-workflow.md にある 4 つの基準:安定した API · 使用予定箇所が 3 か所以上 · デザイナーによるレビュー済み · マジックナンバーではなくトークンを使用。すべて満たしたら sb-ship を実行してください(実験を保持し、git mv は使用しません)。それまではここで反復を続けてください。
次の手順
反復を続け、ゲートを満たしたら sb-ship に引き継いでください。.storybook/audit/status.md に進捗を追記し、中断したセッションをスムーズに再開できるようにします(CONTEXT.md の再開プロトコル)。