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、播放函数、用户事件、测试库查询、色彩配置、自动文档、MDX。 来源：oakoss/agent-skills。