typescript-patterns
TypeScript Patterns
Apply these patterns when writing, reviewing, or refactoring TypeScript code. Prefer type safety over convenience. Catch errors at compile time, not runtime.
Type Design Principles
Default to the narrowest type that accurately represents the data. Widen only when you have a concrete reason.
| Principle | Do | Don't |
|---|---|---|
| Narrow types | status: "active" | "inactive" |
status: string |
| Branded types for IDs | type UserId = string & { __brand: "UserId" } |
userId: string (mixable with any string) |
| Discriminated unions | { kind: "circle"; radius: number } | { kind: "rect"; w: number; h: number } |
Type assertions to distinguish shapes |
| Readonly by default | readonly items: Item[] |
Mutable arrays unless mutation is required |
| Explicit return types on public APIs | function getUser(id: UserId): Promise<User> |
Inferred return types on exported functions |
Branded Types
Use branded types to prevent accidental mixing of structurally identical values:
More from kazdenc/builder-skills
design-brief
One-time setup that gathers design context for your project and saves it to your config file. Run once to establish persistent design guidelines.
30prd
Write a product requirements document from context. Covers problem statement, goals, scope, user stories, success criteria, and edge cases. Use when user says "write a PRD", "product requirements", "requirements doc", "spec this feature", "document requirements", or needs to define what to build and why.
17critique
Evaluate design effectiveness from a UX perspective. Use when user says "critique this design", "review the UX", "give design feedback", "is this good design", "design review", "evaluate this layout", or wants expert evaluative feedback on visual hierarchy, information architecture, and emotional resonance.
14security-scan
Check code for OWASP top 10 vulnerabilities including injection, XSS, auth issues, and secrets exposure. Use when user says "security audit", "check for vulnerabilities", "security scan", "is this secure", "OWASP check", "find security issues", or needs to verify code security before shipping.
13polish
Final quality pass before shipping. Fixes alignment, spacing, consistency, and detail issues. Use when user says "polish this", "final pass", "ready to ship", "fix the details", "pixel-perfect", "almost done", or when a feature is functionally complete but needs refinement.
13api-design
RESTful API design conventions covering URL structure, HTTP methods, error formats, pagination, versioning, and authentication patterns. Use when designing, reviewing, or implementing APIs. Triggers on API design, endpoint structure, REST conventions, or backend architecture tasks.
12