Ask Claude to Write Storybook Stories for Your React Components

Writing Storybook stories by hand is tedious and easy to skip — ask Claude to generate them from your existing components and it'll have your whole library covered in minutes.

Point Claude at your component file and ask it to write stories:

claude "Read src/components/Button.tsx and write a complete Storybook 8 story file with stories for every prop variant, including hover and disabled states. Use CSF3 format with TypeScript."

Claude reads the component's prop types and renders meaningful variants — not just default and secondary, but edge cases like long labels, loading states, and icon-only buttons you might have forgotten.

For a component library, batch the work across all your components at once:

claude "Read every component in src/components/ and generate a .stories.tsx file next to each one. Use the same naming conventions as the existing stories in src/components/Card.stories.tsx."

Pointing Claude at an existing story file is key — it mirrors your project's story structure rather than inventing its own.

You can also ask Claude to add interaction tests using @storybook/test play functions:

// Claude will generate play functions like this
export const SubmitsForm: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button', { name: /submit/i }));
    await expect(canvas.getByText('Success')).toBeInTheDocument();
  },
};

Let Claude bootstrap your entire Storybook library in one session — then keep it up to date the same way.