Storybook Patterns

Component development environment and living documentation system.

When to Activate

• Writing stories for a new component (CSF3 format)
• Setting up interaction tests with play functions
• Configuring MSW for API mocking in stories
• Setting up Chromatic for visual regression
• Auditing existing Storybook setup
• Building automated accessibility checks into stories
• Migrating legacy CSF2 stories to CSF3 with satisfies Meta for full type safety
• Running stories as automated tests in CI using @storybook/test-runner and axe-playwright

Component Story Format 3 (CSF3)