# Storybook

> Storybook configuration, stories, addons, interaction testing, and documentation.

- Skill: `majiayu000/storybook-4` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds add majiayu000/storybook-4`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/storybook-4/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/storybook-4

---


# Storybook Skill

Expert assistance for component development with Storybook.

## Capabilities

- Configure Storybook
- Write component stories
- Add interaction testing
- Configure addons
- Generate documentation

## Story Patterns

```typescript
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: { control: 'select', options: ['primary', 'secondary'] },
    size: { control: 'select', options: ['sm', 'md', 'lg'] },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Click me',
  },
};

export const WithInteraction: Story = {
  args: { children: 'Click me' },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
  },
};
```

## Target Processes

- component-library
- design-system
- documentation