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。