---
name: "storybook-component-driven-ui"
description: "Develop, document, and test UI components in isolation using Component Story Format (CSF 3)."
metadata:
  author: "Storybook"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "write storybook story csf3"
  - "interactive play function storybook"
  - "storybook accessibility test"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Storybook Component-Driven UI Development & Testing

Configures Storybook 8+: writing stories (*.stories.tsx), Component Story Format 3 (CSF 3), interactive play functions with @storybook/test, addon-a11y for automated accessibility audits, and auto-generating documentation.

## When to Invoke
Invoke this skill whenever you need to:
- write storybook story csf3
- interactive play function storybook
- storybook accessibility test

## Execution SOP & Rules
1. Initialize: npx storybook@latest init.
2. Define story in CSF 3: const meta: Meta<typeof Button> = { component: Button }; export default meta;.
3. Declare story variant: export const Primary: Story = { args: { primary: true, label: 'Click Me' } };.
4. Add interactive test: play: async ({ canvasElement }) => { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole('button')); }.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.