Component workbenches and Storybook

Shows meaningful component states in the existing preview environment using the same foundations as production.

storybook-component-workbenches

See how it helps

When is it useful?

Use when shared controls need isolated review without recreating complex backend states.

What does it help you do?

Reuses the installed workbench, theme, fonts and localization providers.
Covers loading, disabled, invalid, empty and long-content states.
Combines components into realistic interactions and responsive examples.

Try asking this

Add preview cases for our form dialog with server errors, long German labels, narrow layout and keyboard interaction. Run the keyboard interaction in each preview state. A server error should keep entered text, focus the correct control and remain readable at phone width.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Storybook & Component Workbenches

An isolated component workbench (Storybook, Histoire, Ladle or the project's built-in UI preview harness) lets developers and designers develop, inspect and test every component state without having to reproduce complex backend states inside the full application.

1. Adapt to the Project's Existing Workbench First

Check package.json and the repository structure to see what component workbench or preview route already exists.
Do not install Storybook or a new workbench framework unprompted on a project that does not use one; introduce a new tool only when explicitly requested or agreed with the architect.
When a workbench is present, ensure its global decorators load the exact same CSS reset, design tokens, font faces, icon sets and i18n provider as the production application so stories never render differently from real screens.

2. Writing High-Value Stories (State Coverage Over Boilerplate)

Organize stories around the states and edge cases that matter to consumers and reviewers:

Default / Playground: interactive controls (args / argTypes) for exploring primary variants and sizes.
All Variants & Sizes Grid: a single story rendering the matrix of variant x size side-by-side in both light and dark themes so visual consistency and alignment can be scanned at a glance.
Interactive States: explicit stories for Loading, Disabled, ReadOnly, InvalidWithError, EmptyState and Selected.
Content Stress Tests:
- LongTextAndOverflow: 120-character titles, unbroken URLs, German/Hungarian translations and multi-line wrapping.
- NarrowViewport: configured with a 320px–375px viewport parameter to verify responsive reflow.
Composition Stories: realistic combinations (DialogWithFormValidation, DataTableWithEmptyFilter, CardGridWithSkeletons) that verify how primitives work together.

3. Interactive `play` Functions & Automated Checks

Turn static stories into executable behavioral and accessibility tests:

Interaction tests (play function):
- Use @storybook/test (within(canvasElement), userEvent, expect) to simulate keyboard navigation (userEvent.tab(), userEvent.keyboard('{Enter}')), open popovers/dialogs, trigger form validation errors, and assert DOM states.
Accessibility addon (@storybook/addon-a11y):
- Run axe-core automatically against every rendered story (including after the play function opens an overlay or triggers an error state).
Remember the boundary of isolated stories: a story passing in isolation does not prove that the component integrates cleanly with real application routing, server data or parent layout constraints — always verify on representative application screens as well.

Included files 1

SKILL.md