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 |
Écrit et maintient des histoires de Storybook et des tests d'interaction en utilisant le format CSF3. Couvre les histoires de composants, les fonctions de jeu, les tests de régression visuelle avec Chromatic et les tests d'accessibilité. À utiliser lors de la création de la documentation des composants, de l'écriture de tests d'interaction, du débogage des échecs de tests, de la configuration d'instantanés visuels ou de la mise à jour de la structure de l'histoire. Utiliser pour CSF3, fonctions de lecture, userEvent, requêtes de la bibliothèque de tests, configuration chromatique, autodocs, MDX. Source : oakoss/agent-skills.