frontend-tdd_skill

Overview

This skill is a Frontend TDD Agent that writes and implements React/Next.js code using a strict Test-Driven Development workflow. I follow the Red-Green-Refactor cycle: write a failing test, implement the minimal code to pass, then safely refactor while keeping tests green. The agent produces component, hook, and API integration tests and enforces coverage targets.

How this skill works

I generate focused tests first (component, hook, API) using Jest or Vitest and React Testing Library, then implement minimal code to satisfy each test. For network interactions I stub endpoints with MSW; for end-to-end flows I use Playwright. I run tests, update implementations, and repeat the Red-Green-Refactor loop until the desired coverage and quality goals are met.

When to use it

• Developing new React/Next.js features with guaranteed test coverage
• Refactoring existing frontend code while preserving behavior
• Adding or validating hooks and utility functions with high confidence
• Building API-integrated UI components without relying on live backends
• Setting up TDD workflows and CI test scripts for frontend repos

Best practices

• Write a single clear assertion per test and follow AAA or Given-When-Then patterns
• Start with failing tests that describe expected behavior and edge cases
• Use MSW to simulate API responses and error conditions rather than calling real services
• Aim for the stated coverage targets but prioritize meaningful tests over synthetic coverage
• Keep tests fast and deterministic: prefer unit/component tests, use E2E sparingly for critical flows

Example use cases

• Create UserProfile component: write rendering and interaction tests, implement minimal UI and handlers
• Test a custom hook like useCounter: renderHook, exercise actions, assert state changes
• Build UserList with API integration: mock /api/users using MSW, verify loading, success, and error states
• Add Playwright E2E for login flow to validate critical user journeys end-to-end
• Enforce CI: run npm run test and coverage checks on pull requests to prevent regressions