Instructions

Drive red → green → refactor for React / Next.js using Vitest and Testing Library. This skill is methodology; use testing-agent when the user wants bulk tests or Playwright scaffolding without TDD cadence.

When to Use

• Use when the user wants TDD, “write the failing test first,” or disciplined unit/integration loops.
• Prefer testing-agent for generating suites, RTL patterns, or Playwright E2E without red-green ritual.
• Prefer pr-review-workflow when reviewing someone else's tests in a PR.

1. Name the behavior in one sentence (user-visible or API contract).
2. Red: write the smallest failing Vitest/RTL test; run it; confirm it fails for the right reason.
3. Green: implement the minimum production change to pass; no drive-by refactors.
4. Refactor: only after green; keep tests green; extract with intent.
5. Boundaries: mock network/DB at the edges you own; do not mock the unit under test into meaninglessness.
6. Next specifics: prefer testing pure modules and client components with RTL; for Server Components/Actions, test extracted logic or route handlers with clear seams - do not invent brittle RSC harnesses.
7. E2E: list Playwright cases as a backlog; do not expand every unit into browser E2E.

Outcomes