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 |
Scrive e mantiene storie di libri di fiabe e test di interazione utilizzando il formato CSF3. Copre le storie dei componenti, le funzioni di gioco, i test di regressione visiva con Chromatic e i test di accessibilità. Da utilizzare durante la creazione della documentazione dei componenti, la scrittura di test di interazione, il debug degli errori dei test, la configurazione di istantanee visive o l'aggiornamento della struttura della storia. Utilizzare per CSF3, funzioni di riproduzione, userEvent, query della libreria di test, configurazione cromatica, autodoc, MDX. Fonte: oakoss/agent-skills.