skills/test-driven-development/SKILL.md
Use when implementing any feature or bugfix, before writing implementation code
npx skillsauth add nhouseholder/nicks-claude-code-superpowers test-driven-developmentInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Write the test first. Watch it fail. Write minimal code to pass.
Core principle: If you didn't watch the test fail, you don't know if it tests the right thing.
Violating the letter of the rules is violating the spirit of the rules.
Use TDD for:
Skip TDD for:
Use judgment: TDD is a tool, not a religion. Apply it where it adds value — primarily where logic can be wrong in non-obvious ways.
FOR BUSINESS LOGIC: Write the test first, watch it fail, then implement.
If you wrote implementation code before the test and it's complex logic: consider rewriting test-first. For simple, obviously-correct code: just add the test after and move on. The goal is catching bugs, not ceremony.
Write one minimal test showing what should happen. Use a clear name describing the behavior, test real code (not mocks), and test one thing.
Requirements:
MANDATORY. Never skip.
npm test path/to/test.test.ts
Confirm:
Test passes? You're testing existing behavior. Fix test.
Test errors? Fix error, re-run until it fails correctly.
Write the simplest code to pass the test. Don't add features, refactor other code, or over-engineer beyond what the test requires (YAGNI).
MANDATORY.
npm test path/to/test.test.ts
Confirm:
Test fails? Fix code, not test.
Other tests fail? Fix now.
After green only:
Keep tests green. Don't add behavior.
Next failing test for next feature.
| Quality | Good | Bad |
|---------|------|-----|
| Minimal | One thing. "and" in name? Split it. | test('validates email and domain and whitespace') |
| Clear | Name describes behavior | test('test1') |
| Shows intent | Demonstrates desired API | Obscures what code should do |
Tests-after answer "what does this code do?" Tests-first answer "what should this code do?" Tests-after are biased by your implementation — you test what you built, not what's required. Test-first forces edge case discovery before implementing.
Common excuses ("test after", "too simple", "manual tested") are all wrong. Default to TDD.
Write a failing test that reproduces the bug. Watch it fail. Fix the code. Watch it pass. The test proves the fix and prevents regression. Never fix bugs without a test.
Before marking work complete:
Can't check all boxes? You skipped TDD. Start over.
If you can't write a test: write the wished-for API first. If the test is complicated: the design is complicated — simplify it. If you must mock everything: the code is too coupled, use dependency injection.
When adding mocks or test utilities, read @testing-anti-patterns.md to avoid common pitfalls:
Default to TDD for all business logic. For trivial changes (config tweaks, copy changes, style fixes),
use judgment — TDD adds overhead without value. When skipping TDD, ensure the change is verified
by other means (manual check, existing tests, type system).
tools
Unified context management and session continuity skill. Combines total-recall, strategic-compact, /ledger, and session continuity. Runs in background to preserve critical context across compaction and sessions.
tools
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
tools
Suggest /ultraplan for complex planning tasks on Claude Code CLI (2.1.91+ only). Research preview.
tools
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.