Storybook Story Writing

Handles Storybook story creation with a clear bias toward CSF3, which is the right call if you're not stuck on legacy code. Walks you through the modern object syntax, proper TypeScript typing with Meta and StoryObj, and patterns for common cases like forms, responsive variants, and data-driven components. The anti-patterns section is helpful, especially calling out the old Template.bind approach that still shows up in too many codebases. Worth using if your team keeps writing inconsistent stories or you're tired of reviewing PRs where someone reinvented decorators badly. Focuses on structure and conventions rather than visual testing.

skills.sh installs: 678
GitHub stars: 200
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add thebushidocollective/han --skill storybook-story-writing --agent claude-code

Installs into .claude/skills of the current project.

Files

Storybook - Story Writing

Write well-structured, maintainable Storybook stories using Component Story Format 3 (CSF3) that showcase component variations and ensure consistent rendering.

Key Concepts

Component Story Format 3 (CSF3)

CSF3 is the modern Storybook format that uses object syntax for stories:

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

const meta = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} satisfies Meta<typeof Button>;

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

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Button',
  },
};