mcpField
S
sb-explore

sb-explore

github.com/strongeronデザイン・UI3979 回インストール4 週間前に更新
リポジトリ

sb-explore について

sb-exploreは、Storybookコンポーネントを隔離環境で反復するスキルです。新規開発や既存コンポーネントの再設計に取り組むチーム向けで、実験を本番コードから分離し、条件を満たした後はsb-shipへ引き継ぎます。

主な機能

  1. 01本番コンポーネントの外で反復
  2. 02プロジェクト設定に沿った実験配置
  3. 03Figmaデザインとの関連付け
  4. 044つの基準による昇格判定
  5. 05実験を保持してsb-shipへ引き継ぎ

活用シーン

  1. 01本番コード外で新しいコンポーネントを試作
  2. 02既存コンポーネントの再設計を反復
  3. 03Figmaのフレームに合わせて実験を調整
  4. 04昇格条件を満たすか確認

インストール

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

$npx skills add https://github.com/strongeron/storybook-workbench --skill sb-explore

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

CONTEXT.md
agents/
openai.yaml
references/
figma-to-storybook.md
labs-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 の再開プロトコル)。

コメント