grey-haven-tdd-typescript

Test-driven development with TypeScript and Vitest involves writing failing tests first, then minimal code to pass them, then refactoring. This Skill provides red-green-refactor workflows, complete Vitest patterns for React components and utilities, and real-world TDD cycles to guide your process from test conception through implementation.

Yes. This Skill covers comprehensive TDD patterns across React components, custom hooks, utility functions, and API routes. Each includes complete example cycles showing how to write failing tests first, implement minimal functionality, and refactor systematically for quality and maintainability.

This Skill provides a 100+ item checklist covering test structure, mocking patterns, coverage standards, and performance best practices. It specifies collocated templates and reference material for organizing tests alongside your code, ensuring consistent quality across components, hooks, utilities, and routes.

Start by defining what your component, hook, or function should do, then write a test that fails because the code doesn't exist yet. This Skill provides templates and real-world examples—like testing a UserProfile loading state or createUser validation—showing how to structure failing tests before any implementation.

TDD writes tests first, driving design and ensuring every line of code has a purpose; tests written after code often miss edge cases and rarely catch design flaws. This Skill enforces test-first workflows with systematic red-green-refactor cycles, checklists, and patterns that eliminate uncertainty in TypeScript development.