/tdd-react

React testing reference for the tdd skill. Test layers, Vitest, RTL, MSW, Storybook composeStory, and Playwright patterns for the frontend package. Use when writing or reviewing tests under frontend/ as part of a red-green-refactor loop, choosing a test layer, mocking HTTP, or

BOOST

gaia-react@gaia-react

GitHub

From plugin

gaia-react-gaia

2322 skills11 agents14 commands

Install

$ npx -y skills add gaia-react/gaia --skill tdd-react --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/tdd-react

Context preview

The summary Claude sees to decide when to auto-load this skill.

React testing reference for the tdd skill. Test layers, Vitest, RTL, MSW, Storybook composeStory, and Playwright patterns for the frontend package. Use when writing or reviewing tests under frontend/ as part of a red-green-refactor loop, choosing a test layer, mocking HTTP, or

SKILL.md

tdd-react.SKILL.md

name: tdd-react
description: React testing reference for the tdd skill. Test layers, Vitest, RTL, MSW, Storybook composeStory, and Playwright patterns for the frontend package. Use when writing or reviewing tests under frontend/ as part of a red-green-refactor loop, choosing a test layer, mocking HTTP, or testing a component, hook, or service.

TDD for React (frontend package)

The stack reference the generic `tdd` skill (`.claude/skills/tdd/SKILL.md`) points at for the React frontend. The red-green-refactor loop, the RED gate, the determinism roll-up, and the worthiness audit live in `tdd`; this skill holds only the React and Vitest specifics.

Read [references/tests-react.md](references/tests-react.md) before writing the first red test. Paths in the reference (`app/`, `test/`, `.playwright/`) are relative to the `frontend/` package directory.

Read it on GitHub ↗

Ships withgaia-react-gaia

Claude is raw power. GAIA is order and focus. The foundation that keeps Claude-shipped code production-grade as your team scales. The React frontend is handled. You build the rest of your app on top. Every convention enforced in code.

Get the whole plugin

Stats

TypeScript Node React Tailwind CSS

+7 tags

Bash GitHub Playwright Vitest Anthropic MCP Obsidian

Stars

Forks

Active

Maintenance

Shell

Language

MIT