How do I install the React Testable Storybookable skill?

Run npx skillmds@latest add jagreehal/react-testable-storybookable in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is React Testable Storybookable safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Testable Storybookable?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Testable Storybookable free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React Testable Storybookable?

jagreehal (@jagreehal) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Testable Storybookable by jagreehal

Name: React Testable Storybookable
Rating: 4.2 (5 reviews)
Author: jagreehal

React Testable Storybookable

Scaffolds React components that are jointly unit-testable and Storybook-ready with MSW and clear seams. Use this skill when creating new components that need tests and stories from day one. Do not use when/for end-to-end browser automation (use agent-browser) or journey-level Storybook docs without scaffolding (use storybook-journeys).

jagreehal Updated Sep 10, 2026

File contents

React Testable & Storybookable

Critical rules

A component may depend on props and injectable context only — never network, router, or an unoverridable global store.
Testability and storybookability are the same property: shared fixtures, shared MSW, shared providers.
Leaf/presentational stays props-only; push fetching into a thin container.
Hooks surface explicit idle / loading / success / error; React Query uses a key factory.
One MSW handler/fixture set backs Vitest, Storybook, and optional local mocks.
Ship the trio: Component.tsx + Component.stories.tsx + Component.test.tsx.
Export props types; type stories from them. QueryClient in tests has retry: false.
Before scaffolding harness files or WRONG/CORRECT samples, read the matching resource below.

Workflow

Classify tier: leaf (props), container (hooks + providers), or provider/boundary.
Keep API/router out of the leaf; pass data and callbacks as props.
Before writing harness or MSW boilerplate, read references/scaffold.md.
Add renderWithProviders (theme, router, QueryClient with retries off) and shared fixtures/handlers with failure injection + store reset.
For containers that read context, add a test-only provider implementing the same state / actions / meta contract.
Scaffold the file trio: scripts/scaffold-component.sh <ComponentName> [target-dir] (see --help).
Stories: Default, Empty, Loading, Error; handlers via fn(). Import shared fixtures.
Wire Storybook preview with MSW + providers + a11y addon.
For WRONG/CORRECT prop, hook, and story patterns, read references/examples.md.

Resources

references/examples.md — prop-driven, keys/hooks, MSW, trio, test provider. Read when implementing.
references/scaffold.md — copy-paste harness: utils, MSW, providers, decorators. Read when setting up a project.
scripts/scaffold-component.sh — generates the component/stories/test trio. Run with --help for usage; refuse overwrite.

Validation

Leaf depends only on props + injectable context
Explicit status / key factory for hooks
Trio present; stories cover Default, Empty, Loading, Error with fn()
Stories and tests share fixtures; containers use renderWithProviders + MSW
QueryClient retry off; store reset between tests
Storybook preview wires MSW + providers + a11y

Constraints

Page-level flows belong in storybook-journeys. Visual tokens in ui-design-principles. Architecture baseline in react-development.
Adjacent: result-types, testing-strategy, validation-boundary. Prefer composition patterns over boolean-prop sprawl.

---name: react-testable-storybookabledescription: >- Scaffolds React components that are jointly unit-testable and Storybook-ready with MSW and clear seams. Use this skill when creating new components that need tests and stories from day one. Do not use when/for end-to-end browser automation (use agent-browser) or journey-level Storybook docs without scaffolding (use storybook-journeys).version: 1.1.0libraries: ["@tanstack/react-query", "msw", "@storybook/test", "@testing-library/react", "vitest"]---# React Testable & Storybookable## Critical rules- A component may depend on **props** and **injectable context** only — never network, router, or an unoverridable global store.- Testability and storybookability are the same property: shared fixtures, shared MSW, shared providers.- Leaf/presentational stays props-only; push fetching into a thin container.- Hooks surface explicit `idle` / `loading` / `success` / `error`; React Query uses a key factory.- One MSW handler/fixture set backs Vitest, Storybook, and optional local mocks.- Ship the trio: `Component.tsx` + `Component.stories.tsx` + `Component.test.tsx`.- Export props types; type stories from them. `QueryClient` in tests has `retry: false`.- Before scaffolding harness files or WRONG/CORRECT samples, read the matching resource below.## Workflow1. Classify tier: leaf (props), container (hooks + providers), or provider/boundary.2. Keep API/router out of the leaf; pass data and callbacks as props.3. Before writing harness or MSW boilerplate, read [references/scaffold.md](references/scaffold.md).4. Add `renderWithProviders` (theme, router, QueryClient with retries off) and shared fixtures/handlers with failure injection + store reset.5. For containers that read context, add a test-only provider implementing the same `state` / `actions` / `meta` contract.6. Scaffold the file trio: `scripts/scaffold-component.sh <ComponentName> [target-dir]` (see `--help`).7. Stories: Default, Empty, Loading, Error; handlers via `fn()`. Import shared fixtures.8. Wire Storybook `preview` with MSW + providers + a11y addon.9. For WRONG/CORRECT prop, hook, and story patterns, read [references/examples.md](references/examples.md).## Resources- [references/examples.md](references/examples.md) — prop-driven, keys/hooks, MSW, trio, test provider. Read when implementing.- [references/scaffold.md](references/scaffold.md) — copy-paste harness: utils, MSW, providers, decorators. Read when setting up a project.- [scripts/scaffold-component.sh](scripts/scaffold-component.sh) — generates the component/stories/test trio. Run with `--help` for usage; refuse overwrite.## Validation- [ ] Leaf depends only on props + injectable context- [ ] Explicit status / key factory for hooks- [ ] Trio present; stories cover Default, Empty, Loading, Error with `fn()`- [ ] Stories and tests share fixtures; containers use `renderWithProviders` + MSW- [ ] `QueryClient` retry off; store reset between tests- [ ] Storybook preview wires MSW + providers + a11y## Constraints- Page-level flows belong in `storybook-journeys`. Visual tokens in `ui-design-principles`. Architecture baseline in `react-development`.- Adjacent: `result-types`, `testing-strategy`, `validation-boundary`. Prefer composition patterns over boolean-prop sprawl.

Frequently asked questions