Storybook mit Claude Code: Component Library entwickeln 2026

1. Storybook Setup mit React und TypeScript

Storybook ist das Standardwerkzeug für isolierte UI-Entwicklung. Mit Claude Code wird das Setup, das normalerweise einen halben Arbeitstag kostet, zum Einzeiler. Claude übernimmt Konfiguration, TypeScript-Typen, Addons und den initialen Boilerplate.

Projektstruktur, die Claude Code auf Basis eines bestehenden Vite-React-Projekts generiert:

# Claude Code Prompt:
# "Initialisiere Storybook 8 in diesem React+TypeScript+Vite-Projekt.
#  Addons: actions, controls, interactions, a11y, viewport. Chromatic ready."

npx storybook@latest init

# Claude Code ergänzt automatisch:
# .storybook/main.ts  — Framework + Addon-Konfiguration
# .storybook/preview.ts — globale Decorator, Parameter
# src/stories/       — Beispiel-Stories

Die generierte .storybook/main.ts:

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',     // Controls, Actions, Docs
    '@storybook/addon-interactions',   // play() Tests
    '@storybook/addon-a11y',           // Accessibility
    '@chromatic-com/storybook',        // Visual Regression
  ],
  framework: { name: '@storybook/react-vite', options: {} },
  typescript: { check: true },
  docs: { autodocs: 'tag' },
};

export default config;

2. Stories schreiben: CSF3, Args und ArgTypes

Component Story Format 3 (CSF3) ist der aktuelle Standard. Statt Class-basierter Stories schreibst du plain Objects. Claude Code generiert vollständige Story-Files inklusive ArgTypes, JSDoc und Variants — auf Basis des bestehenden Komponenten-Codes.

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

// Meta: einmalige Story-Konfiguration
const meta: Meta<typeof Button> = {
  title: 'UI/Button',
  component: Button,
  tags: ['autodocs'],          // automatische Docs-Seite
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost', 'danger'],
      description: 'Visueller Stil des Buttons',
    },
    size: {
      control: 'radio',
      options: ['sm', 'md', 'lg'],
    },
    disabled: { control: 'boolean' },
    onClick:   { action: 'clicked' }, // Action automatisch loggen
  },
};

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

// Einzelne Stories = benannte Exports
export const Primary: Story = {
  args: { variant: 'primary', children: 'Jetzt starten', size: 'md' },
};

export const Danger: Story = {
  args: { variant: 'danger', children: 'Löschen', disabled: false },
};

export const AllVariants: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: '1rem' }}>
      {['primary', 'secondary', 'ghost', 'danger'].map(v => (
        <Button key={v} variant={v as any}>{v}</Button>
      ))}
    </div>
  ),
};

3. Controls und Actions: interaktive Dokumentation

Controls machen Props live editierbar im Storybook-Panel. Actions protokollieren Events. Claude Code konfiguriert beides passend zur Komponente — und schreibt die Docs-Seite gleich mit.

Controls konfigurieren

Claude Code wählt den optimalen Control-Typ für jeden Prop automatisch:

// ArgTypes für ein Formular-Input-Element
argTypes: {
  type:        { control: 'select', options: ['text','email','password','number'] },
  label:       { control: 'text' },
  placeholder: { control: 'text' },
  disabled:    { control: 'boolean' },
  required:    { control: 'boolean' },
  maxLength:   { control: { type: 'range', min: 1, max: 500, step: 1 } },
  color:       { control: 'color' },        // Farbpicker
  onChange:    { action: 'changed' },
  onBlur:      { action: 'blurred' },
  onFocus:     { action: 'focused' },
},

Globale Actions in preview.ts

// .storybook/preview.ts
import { Preview } from '@storybook/react';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },  // alle onXxx-Props automatisch
    controls: {
      matchers: {
        color:    /[Cc]olor$/,
        date:     /[Dd]ate$/,
        boolean: /[Ii]s[A-Z]|[Hh]as[A-Z]/,
      },
    },
    layout: 'centered',
  },
};

export default preview;

4. Storybook Testing: play() Interaction Tests

play()-Funktionen führen automatisierte Interaktionen direkt im Storybook-Canvas aus. Claude Code schreibt sie auf Basis der Komponenten-Logik — ohne dass du Testing-Library-Syntax auswendig lernen musst.

import { within, userEvent, expect } from '@storybook/test';

// Formular-Story mit vollständigem Interaction Test
export const FormSubmitSuccess: Story = {
  args: { onSubmit: fn() },

  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement);

    // Felder ausfüllen
    await userEvent.type(
      canvas.getByLabelText('E-Mail'),
      'test@example.com'
    );
    await userEvent.type(
      canvas.getByLabelText('Passwort'),
      'sicher123!'
    );

    // Absenden
    await userEvent.click(
      canvas.getByRole('button', { name: /anmelden/i })
    );

    // Assertions
    await expect(args.onSubmit).toHaveBeenCalledWith({
      email: 'test@example.com',
      password: 'sicher123!',
    });

    // Erfolgsmeldung prüfen
    await expect(
      canvas.getByText(/anmeldung erfolgreich/i)
    ).toBeVisible();
  },
};

Tests im CLI ausführen

# Alle Interaction Tests laufen lassen (headless)
npx storybook test

# Einzelne Story testen
npx storybook test --testPathPattern Button

# Mit Coverage Report
npx storybook test --coverage

5. Chromatic: Visual Regression Testing

Chromatic macht Screenshots jeder Story und vergleicht sie bei jedem Commit. Änderungen, die den visuellen Output beeinflussen, werden sofort erkannt. Claude Code integriert Chromatic in die CI-Pipeline und hilft beim Triagen von Visual Diffs.

Chromatic einrichten

# 1. Chromatic Paket installieren
npm install --save-dev chromatic

# 2. Ersten Build pushen (Token aus Chromatic Dashboard)
npx chromatic --project-token=chpt_xxxxxxxxxxxx

# 3. npm script hinzufügen (package.json)
"chromatic": "chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"

GitHub Actions CI-Integration

# .github/workflows/chromatic.yml
name: 'Chromatic Visual Tests'
on: [push]

jobs:
  chromatic:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with: { fetch-depth: 0 }   # Git-History für Baselines nötig
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - name: 'Chromatic Publish'
        uses: chromaui/action@latest
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          onlyChanged: true    # nur geänderte Stories vergleichen
          exitZeroOnChanges: true

Visual Diffs triagen mit Claude Code

# Claude Code Prompt bei fehlgeschlagenem Chromatic-Check:
# "Hier ist der Chromatic Diff für die Button-Komponente.
#  Erkläre was sich geändert hat, ob es ein Bug ist
#  oder ein gewollter Change, und ob ich Accept oder Deny sollte."

6. Design System mit Storybook: Dokumentation & Styleguide

Storybook ist mehr als ein Komponentenkatalog — es ist das lebende Dokument des Design Systems. Mit MDX-Seiten, Token-Dokumentation und Claude Code als Co-Autor entsteht ein vollständiger Styleguide ohne Mehraufwand.

MDX Docs-Seiten

{/* src/stories/DesignTokens.mdx */}
import { Meta, ColorPalette, ColorItem, Typeset } from '@storybook/blocks';
import tokens from '../tokens/design-tokens.json';

<Meta title="Design System/Tokens" />

# Design Tokens

## Farbpalette
<ColorPalette>
  <ColorItem
    title="Brand"
    subtitle="Primärfarben"
    colors={{ Primary: '#6366f1', Secondary: '#22d3a0', Accent: '#f59e0b' }}
  />
  <ColorItem
    title="Semantic"
    subtitle="Zustände"
    colors={{ Error: '#ef4444', Warning: '#f59e0b', Success: '#22c55e' }}
  />
</ColorPalette>

## Typografie
<Typeset
  fontSizes={[12, 14, 16, 18, 24, 32, 40, 48]}
  fontWeight={400}
  sampleText="KI-gestützte Entwicklung 2026"
/>

Autodocs: automatische API-Dokumentation

// Jede Komponente mit 'autodocs'-Tag bekommt eine vollständige Docs-Seite
const meta: Meta<typeof Modal> = {
  title: 'UI/Modal',
  component: Modal,
  tags: ['autodocs'],

  // JSDoc-Kommentare erscheinen automatisch in der Doku
  parameters: {
    docs: {
      description: {
        component: `
          Modales Dialogfenster. Folgt WAI-ARIA Dialog Pattern.
          Schließt mit Escape-Taste und Click auf Backdrop.
          Nutzt \`createPortal\` — rendert immer in \`document.body\`.
        `,
      },
    },
  },
};

Storybook als Single Source of Truth

Fazit: Storybook + Claude Code = schnelleres Design System

Storybook ist das richtige Werkzeug für isolierte UI-Entwicklung, visuelle Dokumentation und Regressionstests. Der Flaschenhals war immer der manuelle Aufwand: ArgTypes definieren, Stories für alle Zustände schreiben, Interaction Tests formulieren, Doku aktuell halten.

Claude Code beseitigt genau diesen Flaschenhals. Es liest bestehende Komponenten, generiert vollständige Story-Files im CSF3-Format, schreibt play()-Tests mit korrekten ARIA-Selektoren, konfiguriert Chromatic für CI und erstellt MDX-Doku-Seiten — auf Befehl, in Sekunden.

Das Ergebnis: Ein Design System das tatsächlich dokumentiert ist, getestet läuft und bei visuellen Regressionen sofort warnt. Nicht weil das Team mehr Zeit hatte, sondern weil Claude Code die Routine übernimmt.