Typescript Pro
Implements advanced TypeScript type systems, creates custom type guards, utility types, and branded types, and configures tRPC for end-to-end type safety.
Before & after
Same prompt, same agent — the only difference is the skill.
End-to-end type safety is a great goal. Here are the main approaches: - **Share types** — put your types in a shared package both server and client import - **tRPC** — gives you full type inference without code generation - **GraphQL with codegen** — generate types from your schema - **OpenAPI with a generator** — generate a typed client from your spec - **Zod** — validate at runtime and infer types tRPC is popular because it infers types across the boundary without a separate schema or codegen step. You define procedures on the server and call them on the client with full autocomplete. Which fits your stack?
The gap in most "type-safe" APIs: the types are shared, but nothing
validates the wire. A malformed response still type-checks and then
crashes at runtime. Close both.
tRPC — inference across the boundary, no codegen
server/router.ts
export const appRouter = router({
getUser: publicProcedure
.input(z.object({ id: z.string().uuid() }))
.query(({ input }) => db.user.findUnique({ where: input })),
})
export type AppRouter = typeof appRouter // the only export the client needs
client.ts
const user = await trpc.getUser.query({ id })
// ^? fully inferred. Rename a server field → client fails to compile.
WHY ZOD ON THE INPUT MATTERS
The .input(z...) isn't decoration — it validates at the boundary AND
infers the type from the same declaration. One source, both guarantees.
Without it you have compile-time safety over runtime lies.
BRANDED TYPES — stop mixing up your ids
type UserId = string & { readonly __brand: 'UserId' }
const asUserId = (s: string): UserId => userIdSchema.parse(s) as UserId
Now getPost(userId) won't compile — a plain string, or a PostId, is
rejected. This catches the class of bug that end-to-end inference
alone doesn't: correctly-typed values used in the wrong slot.
DISCRIMINATED UNION for results, not thrown errors
type Result<T> =
| { ok: true; data: T }
| { ok: false; error: 'not_found' | 'forbidden' }
The client must narrow on .ok before touching .data — the compiler
makes the error case unignorable instead of a runtime surprise.
THE TSCONFIG LINE PEOPLE FORGET
"noUncheckedIndexedAccess": true
Without it, arr[0] is typed as T, not T | undefined, and every
"type-safe" codebase has this latent hole.
Which layer do you want built out — the router, or the branded-id
boundary?About this skill
name: typescript-pro description: Use when Implements advanced TypeScript type systems, creates custom type guards, utility types, and branded types, and configures tRPC for end-to-end type safety.
Typescript Pro
Implements advanced TypeScript type systems, creates custom type guards, utility types, and branded types, and configures tRPC for end-to-end type safety. Use when building TypeScript applications requiring advanced generics, conditional or mapped types, discriminated unions, monorepo setup, or full-stack type safety with tRPC.
What you get
- Public GitHub repo
- the skills/typescript-pro folder with SKILL.md and references.
Customize your output
- Fork the repo and extend the skill's reference files for your own stack conventions.
Example output
Activates on a matching request (e.g. building or reviewing Typescript Pro code) and can chain with other skills in the pack.
Best for
Full-stack developers and engineering teams using Claude Code.
SKILL.md preview
---
name: typescript-pro
description: Use this skill when building TypeScript applications that need advanced generics, conditional or mapped types, discriminated unions, or full-stack type safety with tRPC.
version: 1.0.0
category: Development / Languages
author: AgentVolt
license: proprietary
tags:
- development
- languages
---
# Typescript Pro
Implements advanced TypeScript type systems and configures tRPC so types flow unbroken from server to client with zero manual API contract maintenance.
## When to use
… (sign up to view the full skill)More development skills
View all Development skills →SQL Pro
Optimizes SQL queries, designs database schemas, and troubleshoots performance issues.
Csharp Developer
Use when building C# applications with .NET 8+, ASP.NET Core APIs, or Blazor web apps.
Rust Engineer
Writes, reviews, and debugs idiomatic Rust code with memory safety and zero-cost abstractions.
PHP Pro
Use when building PHP applications with modern PHP 8.3+ features, Laravel, or Symfony frameworks.