storybook-stories

Storybook is a frontend workshop for building UI components in isolation. Stories are written in Component Story Format 3 (CSF3), which uses object syntax with args for type-safe component documentation and testing.

When to use: Component documentation with live examples, interaction testing with play functions, visual regression testing, accessibility validation, design system maintenance, isolated component development.

| Basic story | export const Default: Story = { args } | Use args for simple single components | | Complex story | export const Example: Story = { render } | Use render for multi-component layouts | | Meta configuration | const meta = { component, args } satisfies Meta | Define defaults and argTypes |

CSF3 形式を使用して Storybook ストーリーとインタラクション テストを作成および維持します。コンポーネントのストーリー、再生機能、Chromatic によるビジュアル回帰テスト、アクセシビリティ テストをカバーします。コンポーネントのドキュメントの作成、インタラクション テストの作成、テストの失敗のデバッグ、ビジュアル スナップショットの構成、またはストーリー構造の更新を行うときに使用します。 CSF3、再生関数、userEvent、ライブラリ クエリのテスト、Chromatic 構成、autodocs、MDX に使用します。 ソース: oakoss/agent-skills。