clean-code-ts-react

Robert C. Martin (Uncle Bob) TypeScript 5.x + React 19 Best Practices

Craftsmanship principles from Robert C. Martin's Clean Code (2008), re-expressed for modern TypeScript and React. Contains 61 rules across 11 categories, prioritized by cognitive cost across a code change's lifetime. Examples use TS 5.x and React 19 idioms — but the rules are about timeless principles, not specific APIs.

What Makes This Skill Different

Three things set this apart from a generic clean-code copy:

1. Modern idioms as vehicle. Examples use TS 5.x (satisfies, branded types, discriminated unions, const type parameters) and React 19 (function components, hooks, use(), Server Components where relevant). But the rule is always the principle, never the syntax.
2. "When NOT to apply" is first-class. Every rule has 2-3 concrete scenarios where the principle should bend — not generic disclaimers, real situations. Loop counters can be i. Single-use code shouldn't be DRY. Some HOCs are unavoidable.
3. Meta category for principle conflicts. Category 11 names the most common tensions explicitly — DRY vs Single Responsibility, small functions vs deep modules (Ousterhout), type precision vs ergonomic APIs, tests as spec vs documentation. The mark of seniority is knowing which to bend.

When to Apply

Reference these guidelines when:

• Writing new TypeScript or React code and wanting craftsmanship feedback
• Reviewing a pull request for clarity, naming, or abstraction
• Refactoring existing code for readability or maintainability
• Designing function, hook, or component APIs
• Deciding whether to extract, abstract, or duplicate
• Resolving a tension between two clean-code rules (see Category 11)

Skip this skill and use:

• react for React 19 API patterns (concurrent rendering, Server Components, ref-as-prop, useActionState, <Context>-as-provider)
• typescript for compiler performance, tsconfig tuning, type-system perf
• refactor for mechanical refactoring workflows
• tdd for the TDD workflow itself