Agent-Skills.md

Agent Skills: Storybook Journeys

>-

UncategorizedID: jagreehal/jagreehal-claude-skills/storybook-journeys

Repository

jagreehal/jagreehal-claude-skills
jagreehalLicense: MIT
31

Install this agent skill to your local

pnpm dlx add-skill https://github.com/jagreehal/jagreehal-claude-skills/tree/HEAD/skills/storybook-journeys

Skill Files

Browse the full folder contents for storybook-journeys.

Download Skill

Loading file tree…

skills/storybook-journeys/SKILL.md

Skill Metadata

Name
storybook-journeys
Description
>-

Storybook Journeys

Critical rules

  • Journeys are products, not demos: mount real pages with real providers; MSW is the world; play is the script.
  • Every journey needs ≥3 states: happy path, validation/client error, and server error / empty / edge.
  • Prefer role/label queries; never brittle CSS selectors or fixed setTimeout delays.
  • Centralize typed fixtures; small per-story MSW handlers — no live backends, no leaking globals.
  • Story titles use product language (Journeys/...); page journeys use layout: 'fullscreen' by default.
  • Before WRONG/CORRECT samples or folder/naming choices, read the matching resource below.

Workflow

  1. Define journey boundary: entry screen, key actions, success criteria, error states.
  2. Before placing files or choosing storyboard shape, read references/conventions.md.
  3. Build a minimal Journey Harness (router, theme, auth, query client, flags) if the page needs it.
  4. Add MSW handlers per story state (success, 403/500, slow/empty as relevant).
  5. Write CSF: mount page/harness; keep args sparse; a11y-friendly selectors.
  6. Add play: userEvent + waitFor; assert a meaningful end state on the happy path.
  7. Optionally wire Storybook Test Runner for headless CI.
  8. For WRONG vs CORRECT patterns, read references/examples.md.

Resources

Validation

  • [ ] Stories run offline via MSW
  • [ ] Happy path play reaches a meaningful end state
  • [ ] ≥1 error/edge story with distinct handlers
  • [ ] Role/label queries only; fixtures centralized and typed
  • [ ] Journeys/… naming; fullscreen layout for pages
  • [ ] (If requested) Test Runner passes headless

Constraints

  • Atomic component variants belong in react-development / react-testable-storybookable, not here.
  • Adjacent: testing-strategy (pyramid), validation-boundary / result-types (mock shapes), ui-design-principles, agent-browser, fn-args-deps, observability.