tdd-workflow
TDD Workflow
Write tests first, code second.
1. The TDD Cycle
🔴 RED → Write failing test
↓
🟢 GREEN → Write minimal code to pass
↓
🔵 REFACTOR → Improve code quality
↓
Repeat...
2. The Three Laws of TDD
- Write production code only to make a failing test pass
- Write only enough test to demonstrate failure
- Write only enough code to make the test pass
3. RED Phase Principles
What to Write
| Focus | Example |
|---|---|
| Behavior | "should add two numbers" |
| Edge cases | "should handle empty input" |
| Error states | "should throw for invalid data" |
RED Phase Rules
- Test must fail first
- Test name describes expected behavior
- One assertion per test (ideally)
4. GREEN Phase Principles
Minimum Code
| Principle | Meaning |
|---|---|
| YAGNI | You Aren't Gonna Need It |
| Simplest thing | Write the minimum to pass |
| No optimization | Just make it work |
GREEN Phase Rules
- Don't write unneeded code
- Don't optimize yet
- Pass the test, nothing more
5. REFACTOR Phase Principles
What to Improve
| Area | Action |
|---|---|
| Duplication | Extract common code |
| Naming | Make intent clear |
| Structure | Improve organization |
| Complexity | Simplify logic |
REFACTOR Rules
- All tests must stay green
- Small incremental changes
- Commit after each refactor
6. AAA Pattern
Every test follows:
| Step | Purpose |
|---|---|
| Arrange | Set up test data |
| Act | Execute code under test |
| Assert | Verify expected outcome |
7. When to Use TDD
| Scenario | TDD Value |
|---|---|
| New feature | High |
| Bug fix | High (write test first) |
| Complex logic | High |
| Exploratory | Low (spike, then TDD) |
| UI layout | Low |
8. Test Prioritization
| Priority | Test Type |
|---|---|
| 1 | Happy path |
| 2 | Error cases |
| 3 | Edge cases |
| 4 | Performance |
9. Anti-Patterns
| ❌ Don't | ✅ Do |
|---|---|
| Skip the RED phase | Watch test fail first |
| Write tests after | Write tests before |
| Over-engineer initial | Keep it simple |
| Multiple asserts | One behavior per test |
| Test implementation | Test behavior |
10. AI-Augmented TDD
Multi-Agent Pattern
| Agent | Role |
|---|---|
| Agent A | Write failing tests (RED) |
| Agent B | Implement to pass (GREEN) |
| Agent C | Optimize (REFACTOR) |
Remember: The test is the specification. If you can't write a test, you don't understand the requirement.
More from xfstudio/skills
baoyu-post-to-wechat
Posts content to WeChat Official Account (微信公众号) via Chrome CDP automation. Supports article posting (文章) with full markdown formatting and image-text posting (图文) with multiple images. Use when user mentions "发布公众号", "post to wechat", "微信公众号", or "图文/文章".
20last30days
Research a topic from the last 30 days on Reddit + X + Web, become an expert, and write copy-paste-ready prompts for the user's target tool.
15ui-ux-pro-max
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.
133d-web-experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
12frontend-design
Create distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboards, or frontend applications.
11backend-patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.
10