Skip to main content
storybook Use when documenting, developing, or testing UI components with Storybook. Covers CSF3, CSF Factories, play functions, Args, interaction testing, and addon configuration.
USE FOR: Storybook stories (CSF3 and CSF Factories), play functions, Args and ArgTypes, interaction testing, Storybook addons, visual regression testing, component documentation
DO NOT USE FOR: design token authoring (use design-tokens), token transformation (use style-dictionary), Figma design handoff (use figma), cross-framework component compilation (use mitosis)
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/Tyler-R-Kendrick/agent-skills --skill storybookThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name storybook description Use when documenting, developing, or testing UI components with Storybook. Covers CSF3, CSF Factories, play functions, Args, interaction testing, and addon configuration.
USE FOR: Storybook stories (CSF3 and CSF Factories), play functions, Args and ArgTypes, interaction testing, Storybook addons, visual regression testing, component documentation
DO NOT USE FOR: design token authoring (use design-tokens), token transformation (use style-dictionary), Figma design handoff (use figma), cross-framework component compilation (use mitosis)
license MIT metadata {"displayName":"Storybook","author":"Tyler-R-Kendrick"} compatibility claude, copilot, cursor references [{"title":"Storybook Official Documentation","url":"https://storybook.js.org/docs"},{"title":"Storybook — GitHub Repository","url":"https://github.com/storybookjs/storybook"}]
Storybook
Overview
Storybook is the standard tool for developing, documenting, and testing UI components in isolation. Components are rendered in "stories" — declarative examples that showcase every state. Storybook supports React, Vue, Angular, Svelte, Web Components, and more.
CSF3 — Component Story Format 3 CSF3 is the default story format since Storybook 7. Stories are plain objects with args, reducing boilerplate:
import type { Meta , StoryObj } from "@storybook/react" ;
import { Button } from "./Button" ;
const meta = {
component : Button ,
parameters : { layout : "centered" },
argTypes : {
variant : {
control : "select" ,
options : ["primary" , "secondary" , "ghost" ],
},
size : {
control : "radio" ,
options : ["sm" , "md" , "lg" ],
},
},
} satisfies Meta <typeof Button >;
export default meta;
type Story = StoryObj <typeof meta>;
export const Primary : Story = {
args : {
variant : "primary" ,
children : "Click me" ,
},
};
export const Secondary : Story = {
args : {
variant : "secondary" ,
children : "Click me" ,
},
};
export const Disabled : Story = {
args : {
...Primary .args ,
disabled : true ,
},
};
CSF Factories (Experimental) CSF Factories provide full type inference through a factory function chain — no manual type annotations needed:
import { definePreview } from "@storybook/react" ;
import addonA11y from "@storybook/addon-a11y" ;
export default definePreview ({
addons : [addonA11y ()],
parameters : {
layout : "centered" ,
},
});
import preview from "#.storybook/preview" ;
import { Button } from "./Button" ;
const meta = preview.meta ({
component : Button ,
argTypes : {
variant : { control : "select" , options : ["primary" , "secondary" ] },
},
});
export const Primary = meta.story ({
args : { variant : "primary" , children : "Click me" },
});
export const Secondary = meta.story ({
args : { variant : "secondary" , children : "Click me" },
});
Subpath Imports CSF Factories use subpath imports for stable references. Add to package.json:
{
"imports" : {
"#*" : [ "./*" , "./*.ts" , "./*.tsx" ]
}
}
Play Functions Play functions add automated interactions to stories — simulating clicks, typing, and assertions:
import { expect, fn, userEvent, within } from "@storybook/test" ;
export const SubmitForm : Story = {
args : {
onSubmit : fn (),
},
play : async ({ canvasElement, args }) => {
const canvas = within (canvasElement);
await userEvent.type (canvas.getByLabelText ("Email" ), "user@example.com" );
await userEvent.click (canvas.getByRole ("button" , { name : "Submit" }));
await expect (args.onSubmit ).toHaveBeenCalledWith ("user@example.com" );
},
};
Play Function API Import Description within(element)Scoped Testing Library queries userEvent.click(el)Simulate click userEvent.type(el, text)Simulate typing userEvent.selectOptions(el, value)Select dropdown option userEvent.keyboard(keys)Simulate keyboard input expect(value)Jest-compatible assertions fn()Create a spied function (like jest.fn()) waitFor(callback)Wait for async conditions
Args and ArgTypes Args are the dynamic inputs to a story. ArgTypes control how Storybook renders controls in the UI:
const meta = {
component : Card ,
argTypes : {
title : { control : "text" },
elevation : { control : { type : "range" , min : 0 , max : 5 } },
variant : { control : "select" , options : ["outlined" , "filled" ] },
showHeader : { control : "boolean" },
padding : { control : "number" },
onClick : { action : "clicked" },
},
} satisfies Meta <typeof Card >;
Control Types Control Type Description textstring Text input booleanboolean Checkbox toggle numbernumber Number input rangenumber Slider with min/max selectenum Dropdown radioenum Radio buttons colorstring Color picker dateDate Date picker objectobject JSON editor
Interaction Testing Play functions double as interaction tests when run via the Storybook test runner:
npm install -D @storybook/test-runner
npx test-storybook
npx test-storybook --url http://localhost:6006
Decorators Decorators wrap stories with context — providers, layouts, themes:
const meta = {
component : ProfileCard ,
decorators : [
(Story (
<ThemeProvider theme ="light" >
<div style ={{ padding: "1rem " }}>
<Story />
</div >
</ThemeProvider > satisfies Meta <typeof ProfileCard >;
Parameters Parameters configure addons and story behavior:
export const Mobile : Story = {
args : { children : "Hello" },
parameters : {
viewport : { defaultViewport : "mobile1" },
backgrounds : { default : "dark" },
a11y : { config : { rules : [{ id : "color-contrast" , enabled : true }] } },
},
};
Key Addons Addon Purpose @storybook/addon-a11yAccessibility audits (axe-core) @storybook/addon-viewportResponsive viewport simulation @storybook/addon-backgroundsBackground color switching @storybook/addon-actionsLog callback invocations @storybook/addon-docsAuto-generated documentation @storybook/addon-interactionsStep-through play function debugger @storybook/addon-designsEmbed Figma frames alongside stories
Storybook Configuration
import type { StorybookConfig } from "@storybook/react-vite" ;
const config : StorybookConfig = {
framework : "@storybook/react-vite" ,
stories : ["../src/**/*.stories.@(ts|tsx)" ],
addons : [
"@storybook/addon-a11y" ,
"@storybook/addon-interactions" ,
],
};
export default config;
Commands
npx storybook dev -p 6006
npx storybook build -o storybook-static
npx test-storybook
npx storybook@latest init
Best Practices
Write a story for every meaningful component state — default, hover, disabled, loading, error, empty.
Use play functions for interaction tests so tests live alongside the stories they verify.
Use args inheritance (...Primary.args) to build story variants without duplication.
Add argTypes with controls so designers and PMs can explore component variations without code.
Use decorators for providers (theme, i18n, router) rather than wrapping every story manually.
Add the @storybook/addon-a11y addon and leave it enabled by default for continuous accessibility checks.
Run test-storybook in CI to catch interaction regressions on every PR.
Use @storybook/addon-designs to embed Figma frames next to stories for easy comparison.
More from this repository
Use when producing agent/LLM evals, synthetic simulation data, or self-improvement pipelines for prompts, code, skills, agents, harnesses, and workflows. Covers AgentEvals/AgentV, Agent Skills evals, ASSERT, GEPA, Trace, VISTA, Agent Lightning, SkillOpt, Simula-style data design, progressive disclosure, deterministic workspaces, and release evidence.
USE FOR: eval creation, EVAL.yaml, AgentEvals, AgentV, evals.json, ASSERT, judge-traces, behavior taxonomy, judges, graders, rubrics, synthetic data, simulation data, Simula, QDC, source-grounded generation, prompt optimization, agent improvement, skill improvement, harness hardening, progressive disclosure, deterministic workflows, GEPA, Trace, VISTA, Agent Lightning, SkillOpt
DO NOT USE FOR: ordinary unit/integration tests without AI quality criteria (use testing), refactoring without eval or trace feedback (use refactor), generic Agent Skills packaging without eval or improvement work (use agent-skills)
Use when working with AI agent protocols, standards, interoperability specifications, evaluation contracts, synthetic simulation data, improvement pipelines, and agent steering workflows. Covers MCP, A2A, ACP, Agent Skills, AGENTS.md, ADL, Improve, x402, AP2, MCP Apps, cagent, and learn.
USE FOR: agent protocol selection, comparing MCP vs A2A vs ACP, understanding agent standards ecosystem, choosing payment protocols, choosing eval standards, choosing improvement techniques, choosing synthetic data simulation techniques, steering from user feedback
DO NOT USE FOR: specific protocol, eval, or improvement implementation details (use the sub-skills: mcp, a2a, acp, improve, learn, x402, etc.)
Related occupations SOC
Based on SOC occupation classification
