roee030Claude Code
curl -fsSL https://raw.githubusercontent.com/vibe-md/vibe.md/7cb0620fbd80f9829155d8866328b58cd18d5aa7/scripts/install.sh \
| bash -s -- --skill test-first-react \
--agent claude-code --ref 7cb0620fbd80f9829155d8866328b58cd18d5aa7Test First React
AvailableEnforces Test-First (TDD) workflow for React components using React Testing Library. Use when building or changing React UI, components, forms, or pages. Always write tests before implementation code. When tests fail, stop and discuss with the user whether to fix the code or update the tests.
When you ask your agent for a React component, page or form, this skill makes it write the tests first, show them to you, and wait for your approval before it writes any component code. If a test fails later, your agent stops and asks you what to do instead of quietly changing code or tests until things go green.
Testing
- Claude Code
- Codex CLI
- GitHub Copilot
- Cursor
- Gemini CLI
Maintained by
The problem
AI agents write React code fast, and when a test fails they often "fix" it by editing the test, or by patching the code in a way that hides the real problem. You end up with tests that pass but don't check what you actually wanted, and you don't know what was changed or why.
What it does
Tests before code
Your agent restates what you want, proposes the tests, and waits for your approval. No component code is written before the tests exist and are approved.
Tests what users see
Follows React Testing Library practice: test visible behavior with queries like getByRole and getByLabelText, not internal state or class names.
Stops when a test fails
On any failure it does not auto-fix. It shows the failing test and the error, then waits for your decision.
You choose what to change
Offers clear options: the test is right so fix the code, the test is outdated so update it, the requirement changed so update both, or something else.
Installation
One command
Install directly into your project.
Open Terminal in your project folder, then run this command. No ZIP, moving files, or prompt needed.
- 1Open your project folder in Terminal
- 2Run the command above
- 3Reload your agent and ask to use Test First React
Works on macOS, Linux, and Windows through WSL or Git Bash. The installer checks destinations and stops if existing files conflict.
Usage examples
Type these to your agent in plain language. Here's what to expect.
you › Build a login form with email and password.
Expected workflow
- 01Restates the requirement and asks about anything unclear.
- 02Writes tests first, for example that submitting an empty form shows an error.
- 03Shows you the tests and waits for your approval.
- 04Only then writes the minimal component code and runs the tests.
you › Add a "remember me" checkbox to the login form.
Expected workflow
- 01Proposes the new tests before changing the component.
- 02After you approve, makes the change and runs the tests.
- 03If one fails, stops, shows the error, and asks whether to fix the code, update the test, or change both.
How it works
The skill applies whenever you build, change or fix React UI. It sets three rules: tests come first, a failing test stops the work, and decisions are discussed with you rather than assumed.
It prefers React Testing Library with Jest or Vitest, plus user-event and jest-dom. You approve the tests, then the minimal code to pass them, then the test run.
Safety and limitations
Required permissions
- Read and edit your React source and test files.
- Run your test commands.
Limitations
- It works through instructions to your agent, so it relies on the agent following them. Review what it proposes before approving.
- It is written for React with React Testing Library. It does not cover other frameworks.