mcpField
S
sb-explore

sb-explore

github.com/strongeronDesign & UI3979 installsUpdated 4w ago
Repository

About sb-explore

sb-explore is a skill for iterating on Storybook components in isolation, intended for teams developing new components or redesigning existing ones. It keeps experiments separate from production code and defines a graduation handoff to sb-ship.

Key features

  1. 01Iterate outside the production component directory
  2. 02Place experiments according to project configuration
  3. 03Associate a Figma design
  4. 04Assess graduation against four criteria
  5. 05Preserve experiments and hand off to sb-ship

Use cases

  1. 01Try a new component outside production code
  2. 02Iterate on a redesign of an existing component
  3. 03Refine an experiment against a Figma frame
  4. 04Check whether a component meets graduation criteria

Install

Copy the command and run it in a terminal.

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

After installing, type/sb-explorein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

CONTEXT.md
agents/
openai.yaml
references/
figma-to-storybook.md
labs-workflow.md

Details

From the project README

sb-explore — sandboxed iteration (Build mode: Explore)

The component is new or being redesigned. It lives outside src/components/ so production code can't depend on it. Load references/labs-workflow.md before scaffolding. If the user pasted a Figma URL, ALSO load references/figma-to-storybook.md. Do NOT load composition-patterns.md (that's Compare → sb-wrappers).

Naming: Explore is the canonical term used throughout this skill (titles, disk paths, tags). references/labs-workflow.md predates the rename and says Labs / src/stories/labs/ — read it as the same track (Explore = Labs). Author with Explore; treat Labs only as a legacy alias you may meet in an existing repo.

Before scaffolding (ask yourself)

  • Iterating on a shipping component, or net-new? Determines Path A vs Path B at Ship time.
  • Figma URL pasted? If yes — set parameters.design = { type: 'figma', url } immediately and iterate against the frame (see figma-to-storybook.md).
  • API stable enough to graduate? See the 4 criteria in labs-workflow.md. If not — stay in Explore.

Scaffold

  • Disk path — honor the recorded storiesLocation (.storybook/audit/status.md): when stories are isolated (the audit/client default), scaffold the experiment under .storybook/explore/<topic>/ — don't scatter into a src/ you don't own. Only use src/explore/<topic>/ when the user opted into co-located for a project they own. Vite excludes either from the production bundle.
  • Title — Explore/<topic>/<name> — last in storySort.order, bottom of sidebar.
  • Tags — ['explore', '!autodocs', '!test']. Optional: 'motion', 'figma-sync', 'v2-preview'.

Graduation gate (Explore → Component)

Four criteria in labs-workflow.md: stable API · ≥3 callsites planned · designer-reviewed · tokens not magic numbers. When all met → trigger sb-ship (it preserves the experiment, never git mv). Until then, keep iterating here.

Next

Iterate; when the gate is met, hand off to sb-ship. Append progress to .storybook/audit/status.md so an interrupted session resumes cleanly (CONTEXT.md resume protocol).

Comments

Markdown supported