From rune
Storybook integration knowledge for component verification. Teaches agents how to use Storybook MCP tools, CSF3 story format, story generation patterns, and visual verification workflows. Trigger keywords: storybook, stories, CSF3, component preview, visual verification, story coverage, addon-mcp.
npx claudepluginhub vinhnxv/rune --plugin runeThis skill uses the workspace's default tool permissions.
Provides agents with knowledge about Storybook component verification workflows,
Integrates Storybook MCP server to discover components via docs manifest, preview stories with embeddable URLs, and run tests/a11y audits. Use for reusing existing components, visual verification, and MCP-based testing in React/Storybook projects.
Generates CSF3 Storybook stories for React/Vue components with variant coverage and state matrices. Use when creating stories or scanning for missing ones.
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
Provides agents with knowledge about Storybook component verification workflows, CSF3 story format conventions, MCP tool usage, and visual quality heuristics.
When @storybook/addon-mcp is installed in the project, agents can use these MCP tools:
| Tool | Purpose | Notes |
|---|---|---|
get_ui_building_instructions | CSF3 conventions and story linking guidelines | Call first for context |
preview-stories | Get direct story URLs by path or component ID | Returns navigable URLs |
list-all-documentation | Component and docs inventory | Experimental, React-only |
get-documentation | Full component docs with prop types, JSDoc, examples | Per-component detail |
MCP availability check: Before calling Storybook MCP tools, verify the server is accessible. MCP tools will fail with connection errors if the Storybook server is not running or addon-mcp is not configured. The phase reference file handles server health checks.
For detailed tool documentation, see mcp-tools.md.
Stories use Component Story Format 3 (CSF3) — the standard since Storybook 7+.
Key conventions:
args, not render functions (unless complex composition needed)satisfies Meta<typeof Component> for TypeScript type checkingFor the complete CSF3 authoring guide, see csf3-format.md.
When generating stories for components:
.stories.tsx siblingsFramework-specific templates: story-templates.md.
When no Figma/VSM spec exists, use heuristic checks to catch common UI issues:
| Category | What to Check |
|---|---|
| Rendering | No blank areas, no error boundaries triggered |
| Text | No overlap, no clipping, readable contrast |
| Layout | Consistent spacing, correct flex/grid behavior |
| Responsive | No horizontal scroll at mobile, touch targets >= 44px |
| States | Loading, error, empty, disabled all render correctly |
| Accessibility | Focus indicators visible, ARIA labels present |
Full heuristic checklist: visual-checks.md.
Compares rendered component against Visual Spec Map (VSM):
Heuristic-based quality checks:
tmp/storybook//rune:design-prototype — auto-bootstraps tmp/storybook/, copies prototypes, launches previewtmp/storybook/ — ephemeral Storybook environment used by design-prototype, arc Phase 3.2, and arc Phase 3.3. Bootstrapped via scripts/storybook/bootstrap.shstorybook.enabled, storybook.port, storybook.max_roundsstorybook-reviewer (read-only) + storybook-fixer (write-capable)scripts/storybook/bootstrap.sh)Shared entry point for all Storybook operations. Idempotent — only scaffolds once.
# Design prototype: copy prototype directories
bootstrap.sh --src-dir tmp/design-prototype/{ts}/prototypes
# Arc storybook verification: copy individual story files
bootstrap.sh --story-files src/Button.stories.tsx src/Card.stories.tsx
# Scaffold only (no files)
bootstrap.sh
Returns JSON: { storybook_dir, full_page_component, server_running, ready }
When discipline engineering is enabled (discipline.enabled in talisman), Phase 3.3 (Storybook Verification) runs design-specific proofs via execute-discipline-proofs.sh for each verified component:
| Proof Type | What It Checks | Graceful Degradation |
|---|---|---|
storybook_renders | Storybook build smoke test passes | INCONCLUSIVE (F4) if Storybook not installed |
axe_passes | axe-core accessibility scan (WCAG AA) | INCONCLUSIVE (F4) if axe-core unavailable |
story_exists | Story file + variant exports exist | FAIL (F3) if missing |
token_scan | No hardcoded hex colors in component | FAIL (F3) if violations found |
Evidence artifacts are written to tmp/arc/{id}/storybook-verification/storybook-verification.json with per-check results. Gate behavior is non-blocking by default (WARN on failures). Configure discipline.design.block_on_fail: true in talisman to block the pipeline on design proof failures.