Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/kazdenc/builder-skills/typescript-patternsnpx skills add kazdenc/builder-skills --skill typescript-patternsgit clone --depth 1 https://github.com/kazdenc/builder-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/kazdenc/builder-skills/typescript-patterns)<a href="https://agentmods.dev/skills/kazdenc/builder-skills/typescript-patterns"><img src="https://agentmods.dev/badge/skills/kazdenc/builder-skills/typescript-patterns.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00062 | $0.02464 |
| Opus 5 | $0.00031 | $0.01232 |
| Sonnet 5 | $0.00012 | $0.00493 |
| Haiku 4.5 | $0.00006 | $0.00246 |
Grade A, and why
typescript-patterns scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 283 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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:
type UserId = string & { readonly __brand: unique symbol };
type OrderId = string & { readonly __brand: unique symbol };
function createUserId(id: string): UserId {
return id as UserId;
}
function getOrder(orderId: OrderId): Order { /* ... */ }
// Compile error: UserId is not assignable to OrderId
getOrder(createUserId("abc"));
Generics
Use generics when a function or type operates on a value whose type the caller determines. Don't add generics speculatively — add them when you have two or more concrete use cases.
Constraining Generics
Always constrain generics to the narrowest interface they need:
// Good — constrained to what the function actually uses
function getProperty<T extends Record<string, unknown>, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
// Bad — unconstrained, anything goes
function getProperty<T>(obj: T, key: string): unknown { /* ... */ }
Common Generic Patterns
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 283 lines · 62 tokens per session scan A 66720319efda
typescript-patterns is a skill published in the GitHub repository kazdenc/builder-skills (44 stars, last pushed 5mo ago), licensed MIT. It adds 62 tokens to every session and 2,464 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
client-setup
Create a vanilla tRPC client with createTRPCClient (), configure link chain with httpBatchLink/httpLink, dynamic headers for auth, transformer on links (not client constructor). Infer types with inferRouterInputs and inferRouterOutputs. AbortController signal support. TRPCClientError typing.
adapter-express
Mount tRPC as Express middleware with createExpressMiddleware() from @trpc/server/adapters/express. Access Express req/res in createContext via CreateExpressContextOptions. Mount at a path prefix like app.use('/trpc', ...). Avoid global express.json() conflicting with tRPC body parsing for FormData.
trpc-router
Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData.
clone-website
Reverse-engineer and clone a website in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a…
prettify
Iteratively improves the visual design of an existing page — making it more sophisticated, richer, and prettier — without redesigning from scratch. Works on any page or UI surface: landing pages, marketing pages, pricing, docs, dashboards, admin views, settings, modals, empty states, etc. Use when the user says…
rebase-themes
Rebase all theme- branches onto main, resolving conflicts while preserving each theme's visual identity. Force-pushes directly to theme branches with backup tags. Run as a scheduled task or one-off.