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.

Development / Languagesdevelopmentlanguages
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

PromptMake my API responses fully type-safe from server to client.
Beforegeneric AI agent
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?
Afterwith Typescript Pro
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

SKILL.md
---
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)
Sign up to view, copy, and install the full skill

More development skills

View all Development skills →