skills.rest
anukkrit149
anukkrit149COMMUNITY
Explore all skills by this author →
Website𝕏@anukkritGitHub

storybook-builder

Initialize Storybook with MSW, QueryClient, MemoryRouter, and screen stories.

Updated May 26, 2026
Search Tags:#design system#ui testing#storybook#react query#react router#msw mocking#screen stories
One-click install
npx skills add https://github.com/anukkrit149/anukkrit-skills --skill storybook-builder-anukkrit149
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-builder
Source: https://github.com/anukkrit149/anukkrit-skills/tree/main/cloud/skills/storybook-builder
Command: npx skills add https://github.com/anukkrit149/anukkrit-skills --skill storybook-builder-anukkrit149

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of getting Storybook to accurately render complex UIs—especially design systems—without brittle manual setup or missing mocks.

Core Features & Use Cases

  • End-to-end Storybook setup: initializes Storybook for a React UI package and wires in MSW for realistic network mocking.
  • Design-system foundation: generates branding (tokens/logo/themes) plus layout primitives like AppShell, LandingShell, SplitShell, EmptyState, and LoadingShell.
  • Screen-level fidelity: builds screen stories that mirror production routes, including mock infrastructure (MSW + React Query + MemoryRouter) and an addon index to pick the right Storybook tools for your case.
  • When to use: use it when you want “add storybook” from scratch, when Storybook exists but lacks branding/tokens, or when production routes won’t render correctly in Storybook due to hooks/singletons/router coupling.

Quick Start

Use the storybook-builder skill to “set up Storybook for my repo’s UI package with MSW, QueryClient, MemoryRouter, layout primitives, and route-level screen stories.”

Frequently Asked Questions about storybook-builder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Storybook with MSW mocking for a React UI package?▼

To set up Storybook with MSW mocking, initialize Storybook for your React UI package and wire MSW to provide controlled network mocking for deterministic component rendering. This approach requires MSW, QueryClient, and MemoryRouter decorators.

Why won't my production routes render correctly in Storybook?▼

Production routes fail to render in Storybook due to hooks, singletons, or router coupling. Fix this by applying controlled decorators like MemoryRouter and QueryClient alongside MSW fixture-driven data mocking to ensure deterministic rendering.

What is the best way to add design tokens and layout primitives to an existing Storybook?▼

Adding design tokens and layout primitives to Storybook requires generating a design-system foundation with branding, themes, and structural shells like AppShell and SplitShell. This skill applies that phased foundation to existing setups lacking branding.

Can I build screen stories that mirror production routes using React Query and MemoryRouter?▼

Yes, you can build screen stories mirroring production routes by combining MSW mocking with React Query's QueryClient and MemoryRouter decorators. This configuration ensures fixture-driven data and deterministic rendering for route-level UI testing.

Does Storybook need MSW and React Query decorators for deterministic story rendering?▼

Storybook requires MSW, QueryClient, and MemoryRouter decorators to achieve deterministic story rendering. These controlled decorators isolate components from production side effects and provide consistent fixture-driven data for screen stories.

What Storybook addons do I need for route-level screen stories?▼

Route-level screen stories require specific Storybook addons chosen based on your use case. This skill outputs an addon index guiding you to pick the right Storybook tools supporting MSW, React Query, and MemoryRouter configurations.

Related Skills

Explore More Design & Creative Skills→
JBonfimJBonfim

storybook-stories

Create and maintain Storybook stories for React components with repository conventions.

Community
Intermediate
oakossoakoss
14

storybook-stories

Generate and maintain Storybook stories and interaction tests using CSF3 format.

Official
Intermediate
hypeJunctionhypeJunction
1

add-story

Generates TypeScript test files with visual states and interaction tests for Storybook components.

Community
Intermediate
Camilo8902Camilo8902

api-mock-server

Create mock API servers with MSW, json-server, or custom handlers.

Community
Advanced