Author Storybook stories and manage Chromatic visual regression snapshots for React components.
npx skills add https://github.com/Layer-Fi/layer-react --skill storybook-layer-fi
Please help me install this Agent Skill. Skill: storybook Source: https://github.com/Layer-Fi/layer-react/tree/main/.storybook Command: npx skills add https://github.com/Layer-Fi/layer-react --skill storybook-layer-fi
AllVariants stories for UI/block primitives and one story per meaningful state for features — so visual coverage stays exhaustive without duplicate snapshots. - Visual regression management: Configures Chromatic scoping, global responsive viewports, MSW-backed mock data, and pinned fixture dates so snapshots stay deterministic and cheap. - Tag-driven deploys: Uses public-api, docs-screenshot, and real-backend story tags to control what ships to GitHub Pages, docs.layerfi.com images, and the Vercel real-backend preview. - Use Case: When adding a new Button variant, extend the component's exported union and the existing gallery story picks it up automatically — no new story or extra Chromatic snapshot needed. ## Quick Start Ask the assistant to write a Storybook story for a new component following the gallery and one-story-per-state conventions in this skill.High-intent search queries and answers about installing and using this skill.
Pack all variants into a single gallery story that lays out every variant, size, and state in one grid, driven by the component's exported union types. Put args and argTypes on the meta so Storybook controls still work against the gallery.
Limit Chromatic to design-system primitives via onlyStoryFiles and TurboSnap, since feature stories compose those primitives and regressions surface there first. Add disableSnapshot parameters to stories that add no visual signal.
Configure global viewports in preview.tsx parameters so every story is captured at mobile, tablet, and desktop widths. Because responsiveness is computed from measured width in JS, Chromatic must resize the capture iframe rather than rely on CSS-only viewports.
Register MSW handlers globally in preview.tsx and override endpoints per story with parameters.msw.handlers. Use generated fixtures for list volume and pin fixture dates plus the system clock so snapshots do not drift over time.
Flakiness comes from artificial response delays causing loading-versus-loaded races and from animation libraries. Prefer stories that render a settled state, add a Chromatic delay parameter, or disable animations behind an isChromatic guard.
Skip the real-backend tag when a story uses story-level MSW handlers to force a state the backend will not reproduce, or when it has a play function that clicks rows real data may not contain. Meta-level handlers are acceptable since real data overrides them.
zenbuappsGenerate Zod schemas, MSW handlers, and a typed API client from api.yml specifications.
Prompt-or-Die-LabsSet up automated visual regression testing with Percy, Chromatic, Playwright, or BackstopJS.
naxorutoValidate acceptance criteria and update story status to Complete.
sanity-ioAdds and maintains Chromatic visual regression coverage via Storybook stories, Vitest browser tests, and Playwright snapshots.