A setup guide for adding Storybook to a React application built with Vite. Storybook is a tool for developing and checking interface components separately from the full application.

Use it when an app has no Storybook and you need to install it, connect shared providers or MCP, decide where stories belong, and verify the setup.

It prevents setup work from duplicating Storybook's official onboarding and helps align the resulting configuration with the app's providers, Vite settings, and component stories.

sb-setup — Skill for Claude Code and Codex by strongeron

Install

Getting it into your agent

This one installs as part of its plugin. Adding the marketplace and installing the plugin brings it with everything else the plugin ships.

Claude Code

/plugin marketplace add strongeron/storybook-workbench

Claude Code

/plugin install storybook-workbench

Made for: Claude Code, Codex.

Or install storybook-workbench, the plugin that ships this one along with the rest of its 11 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/strongeron/storybook-workbench/sb-setup.svg)](https://agentmods.dev/skills/strongeron/storybook-workbench/sb-setup)

Your own site

<a href="https://agentmods.dev/skills/strongeron/storybook-workbench/sb-setup"><img src="https://agentmods.dev/badge/skills/strongeron/storybook-workbench/sb-setup.svg" alt="Measured on agentmods" height="20"></a>

Per session 61 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,430 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00061	$0.02430
Opus 5	$0.00030	$0.01215
Sonnet 5	$0.00012	$0.00486
Haiku 4.5	$0.00006	$0.00243

Measured 8d ago against content hash ae8e5b5d52ee, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

sb-setup scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/discover-runtime.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/sb-setup/SKILL.md · 129 lines

How it starts

The opening of the file, as written. The whole thing — 129 lines — stays where its author put it; the contents beside it link to each section on GitHub.

sb-setup — native-first install

This skill is a thin align+verify layer. It does NOT re-implement a bootstrap wizard.

Bootstrap — defer to Storybook

test -d .storybook && grep -q '"storybook"' package.json 2>/dev/null && echo PRESENT || echo NO_STORYBOOK
# NO_STORYBOOK → defer to Storybook's OWN official onboarding. `storybook` is the official npm
# package (@storybook/cli) — not a URL, not bundled or controlled by this skill; the USER runs it.
# This skill ships ZERO runtime dependencies and makes no network calls of its own. See SECURITY.md.
npx storybook ai setup        # Storybook 10.4 agentic onboarding (the official `storybook` package)

Know what the native flow already does

Before layering anything on top, read references/native-ai-setup-prompt.md — the captured storybook ai setup prompt (default optimized-tests variant), with its 8 rules of engagement, 8-step plan (discover → shared preview → portals → MSW → write ≤10 colocated stories + one CssCheck → play discipline → batch-verify → cleanup), 5 done-when criteria, and verbatim code examples. Our job is to NOT redo any of that — only add the under-documented align bits below.

Then align + verify (the under-documented bits)

Load references/install-wizard.md for the full align layer (load it only when you're actually aligning a fresh storybook ai setup — Do NOT load it to answer a one-off "is my Storybook configured right?" question; the checklist below is enough for that):

runtime discovery FIRST — ${CLAUDE_PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/discover-runtime.py → .storybook/runtime.json: the native Step-1 facts as ground truth (provider tree + from, root-CSS mechanism (JS import vs index.html <link>), portal target ids, network/MSW surface). The three bullets below come from it — verify against it, don't re-derive by reading the entry by hand.
viteFinal — strip plugins Storybook can't use; keep aliases.
provider decorators — wrap stories in the app's Router/Theme/Query providers (from runtime.json.providers). For a class-based dark theme (toggling .dark on <html>, colors from CSS vars), the decorator alone isn't enough: also theme the canvas root in .storybook/preview-head.html (html, body, .sb-show-main { background: var(--color-background) } + html.dark { color-scheme: dark }), or centered stories render a dark sliver in a white field and padded/fullscreen ones a white frame. (Snippet in install-wizard.md item 9.)
bare-OKLCH / shadcn-channel token bridge — for a project whose :root declares bare channel triplets (--background: 0.99 0.003 234, no oklch() wrapper) under shadcn's --background/--card/… names with no --color-* namespace reaching the iframe, the wrappers' --color-* chrome refs resolve to nothing and every surface renders unstyled (the #1 "first run looked broken" gap on OKLCH design systems). Detect it (dominant css-vars, channel-triplet values, no --color-background) and auto-generate the --color-* → oklch(var(--bare)) bridge into .storybook/preview-head.html for both modes — same place/mechanism as the canvas-root theming above. Recipe + detection in install-wizard.md item 11.
MCP wiring — detect @storybook/addon-mcp + .mcp.json; wire if present.
panel-visible default — write .storybook/manager.ts with addons.setConfig({ showPanel: true, panelPosition: 'bottom' }) so the Controls / Actions / Accessibility panel shows by default. Storybook ships no manager.ts; without it an accidental A keypress (or a dragged-closed divider) persists a "panel hidden" state in localStorage and reviewers/agents conclude the stories have no Controls. The Controls panel is where sb-stories' argTypes surface, so this is what makes that authoring work visible. (Snippet in install-wizard.md.)
theme switching (themed projects) — wire @storybook/addon-themes, don't hand-roll a globalTypes.theme. If runtime discovery finds a theme mechanism (next-themes, a class-based .dark, or data-theme), register withThemeByClassName so the toolbar toggles the same .dark class the canvas-root theming (item 9) and the bare-OKLCH --color-* bridge (item 11) already key off — one switch re-skins every surface, and the wrappers' live getComputedStyle re-read fires on the flip. Without it a themed app opens with no theme control at all (the reviewer ends up hand-adding one — the gap this closes). Add @storybook/addon-backgrounds only if you need surface-on-surface checks. Snippet in install-wizard.md item 12.
accessibility is already installed — confirm, don't re-add. Native storybook init bundles @storybook/addon-a11y (axe per story, incl. contrast); the panel-visible default above surfaces its Accessibility panel. Verify it's in package.json and the panel shows — runtime a11y/contrast is axe's job, so DesignSystemHealth's checks stay static (raw-hex / undefined / orphan / scale-gap), complementary to axe, not a re-implementation of it.
docs-page composition — set parameters.docs.page in preview.tsx to the standard autodocs blocks with the UsageSection block near the top, so every component's (and Foundations/Colors / Typography's) Docs opens with a "Real usage in this app" status band before the playground. It reads the usage JSONs lazily (renders nothing until they exist), so it's safe to wire at setup. (Recipe + ordering in install-wizard.md Phase 4.)
adopt existing structure — scan-and-match storySort.order, title taxonomy, file placement; don't impose new conventions on an established repo.
adopt the native prompt's preview doctrine (install-wizard.md items 7–9): pin determinism the app itself reads in a global beforeEach (MockDate + only the localStorage keys it reads); Edit the init-generated preview.tsx, never overwrite it; emit exactly one CssCheck story (a getComputedStyle proof the CSS actually loaded — the #1 silent failure otherwise); and theme the canvas root for class-based dark themes (item 9 above).

Read the full file on GitHub · 129 lines

Files

What ships with it

5 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

8d ago First seen · 129 lines · 61 tokens per session scan A ae8e5b5d52ee

Subscribe to this mod's changes

sb-setup is a skill published in the GitHub repository strongeron/storybook-workbench (33 stars, last pushed 2mo ago), licensed MIT. It adds 61 tokens to every session and 2,430 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Claude Code Frontend React agent-skills codex component-inventory csf3 cursor

skillshare-ui-website-style

Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard…

runkids/skillshare · 147 tokens

21st-ui

Find, install, and generate UI with 21st.dev. Use when the user asks for a UI component (pricing table, hero, navbar, dashboard, form, etc.), wants design inspiration, needs a brand logo as an SVG component, or wants to generate new UI from a prompt.

21st-dev/magic-mcp · 63 tokens

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API ( component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components…

fcakyon/claude-codex-settings · 127 tokens

extract-source-sample

Given the path to a finished content-goose ad-run folder, extract everything that defines that ad — recipe shot list, VO script, characters, voices, world, atom-skills, master mp4 — and emit a source-sample.json in the exact shape the upload-ad-sample skill writes to the Goose Ads library. Also links every character…

gooseworks-ai/goose-skills · 160 tokens

remotion-to-hyperframes

Port an existing Remotion (React) composition to HyperFrames HTML. Use ONLY when the user explicitly asks to port/convert/migrate/translate a Remotion source. Do NOT use: (a) authoring a new HyperFrames composition; (b) Remotion mentioned in passing; (c) Remotion code shared as reference only; (d) "same video as my…

calesthio/OpenMontage · 215 tokens

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…

calesthio/OpenMontage · 67 tokens