Storybook Patterns

Quick Guide: Storybook is a component workshop for building and documenting UI in isolation. Use CSF 3.0 format with typed meta and story objects. Define component variants via args. Use play functions for interaction testing. Enable autodocs for automatic documentation. Configure addons in .storybook/main.ts.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST use CSF 3.0 format with satisfies Meta<typeof Component> for type-safe story metadata)

(You MUST define a default meta export with component property - stories without component won't render)

(You MUST use args for defining props - NOT rendering components with hardcoded props)

(You MUST use play functions with @storybook/test utilities for interaction testing - NOT custom event firing)