Trpc Type Safety
Wire a solo-builder full-stack app with end-to-end TypeScript types between client and server without codegen or OpenAPI drift.
Overview
trpc-type-safety is an agent skill for the Build phase that guides end-to-end type-safe TypeScript APIs with tRPC, Zod validation, and client integration.
Install
npx skills add https://github.com/bobmatnyc/claude-mpm-skills --skill trpc-type-safetyWhat is this skill?
- Progressive-loading skill doc (~12k tokens full) covering summary through Next.js and React Query integration
- Router and procedure patterns with Zod input validation and structured error handling
- Context, middleware, and auth-style extension points for production APIs
- Client setup and React integration for inferred types end-to-end
- Pairs with Zod validation and related Next.js, Zustand, and Vitest skills in the same toolchain
- Progressive-loading sections from summary through Next.js integration
- Documented full skill size on the order of ~12,046 tokens
- Related toolchain links for Zod, Next.js, Zustand, and Vitest
Adoption & trust: 1.1k installs on skills.sh; 53 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are shipping a TypeScript full-stack app and keep breaking the contract between API routes and the UI because types are duplicated or generated pipelines are out of sync.
Who is it for?
Indie builders on Next.js or React who already use TypeScript and want RPC ergonomics with Zod inputs and React Query on the client.
Skip if: Teams committed to REST plus OpenAPI/codegen only, or polyglot backends where tRPC’s TypeScript-only model is not in play.
When should I use this skill?
You are implementing or refactoring a TypeScript API and want client-server type inference with tRPC, Zod inputs, and React or Next.js clients.
What do I get? / Deliverables
After following the skill, you have tRPC routers, validated procedures, and a typed client so server changes fail at compile time instead of in production.
- tRPC router and procedure definitions with validated inputs
- Typed client configuration and React integration patterns
- Error-handling and middleware conventions for the API layer
Recommended Skills
Journey fit
Type-safe RPC routers, procedures, and client setup belong in the Build phase when the product API and front-end are being implemented together. Backend is the canonical shelf because the skill centers on defining tRPC routers, context, middleware, validation, and server procedures—not distribution or validation of the business idea.
How it compares
Use for inferred TypeScript RPC contracts instead of maintaining parallel REST DTOs and a separate codegen pipeline.
Common Questions / FAQ
Who is trpc-type-safety for?
Solo and small-team builders implementing TypeScript full-stack products who want one source of truth for API shapes between server procedures and React clients.
When should I use trpc-type-safety?
During Build when you are defining backend routers, adding Zod-validated procedures, or hooking up a tRPC client with React Query or Next.js.
Is trpc-type-safety safe to install?
Review the Security Audits panel on this Prism page and inspect the skill files in your repo before granting your agent shell or network access.
SKILL.md
READMESKILL.md - Trpc Type Safety
{ "name": "trpc", "version": "1.0.0", "category": "toolchain", "toolchain": "typescript", "tags": [ "trpc", "api", "typescript", "type-safety", "react-query", "nextjs", "end-to-end-types", "rpc", "websocket", "real-time" ], "entry_point_tokens": 70, "full_tokens": 12046, "related_skills": [ "../../validation/zod", "../../../nextjs", "../../state/zustand", "../../testing/vitest" ], "author": "claude-mpm-skills", "license": "MIT", "subcategory": "api", "requires": [ "../../validation/zod" ], "created": "2025-11-30", "updated": "2025-11-30", "repository": "https://github.com/bobmatnyc/claude-mpm-skills", "description": "End-to-end type safety for TypeScript APIs without code generation. Build type-safe APIs with automatic client-server type inference.", "keywords": [ "trpc", "type-safe-api", "typescript", "react-query", "nextjs", "zod", "rpc", "api", "full-stack" ], "documentation": "https://trpc.io", "progressive_loading": { "enabled": true, "entry_point": "summary", "estimated_tokens": { "summary": 70, "when_to_use": 150, "quick_start": 300, "core_concepts": 400, "router_definition": 350, "procedures": 400, "input_validation": 350, "context": 400, "middleware": 400, "error_handling": 350, "client_setup": 400, "react_integration": 450, "nextjs_integration": 500, "subscriptions": 400, "file_uploads": 300, "batching": 350, "typescript_inference": 300, "testing": 400, "production_patterns": 450, "comparison": 250, "migration": 300, "best_practices": 400 } } } --- name: trpc-type-safety description: "tRPC end-to-end type-safe APIs for TypeScript with React Query integration and full-stack type safety" user-invocable: false disable-model-invocation: true progressive_disclosure: entry_point: summary: "tRPC end-to-end type-safe APIs for TypeScript with React Query integration and full-stack type safety" when_to_use: "When working with trpc-type-safety or related functionality." quick_start: "1. Review the core concepts below. 2. Apply patterns to your use case. 3. Follow best practices for implementation." --- # tRPC - End-to-End Type Safety --- progressive_disclosure: entry_point: summary sections: - id: summary title: "tRPC Overview" tokens: 70 next: [when_to_use, quick_start] - id: when_to_use title: "When to Use tRPC" tokens: 150 next: [quick_start, core_concepts] - id: quick_start title: "Quick Start" tokens: 300 next: [core_concepts, router_definition] - id: core_concepts title: "Core Concepts" tokens: 400 next: [router_definition, procedures] - id: router_definition title: "Router Definition" tokens: 350 next: [procedures, context] - id: procedures title: "Procedures (Query & Mutation)" tokens: 400 next: [input_validation, context] - id: input_validation title: "Input Validation with Zod" tokens: 350 next: [context, middleware] - id: context title: "Context Management" tokens: 400 next: [middleware, error_handling] - id: middleware title: "Middleware" tokens: 400 next: [error_handling, client_setup] - id: error_handling title: "Error Handling" tokens: 350 next: [client_setup, react_integration] - id: client_setup title: "Client Setup" tokens: 400 next: [react_integration, nextjs_integration] - id: react_integration title: "React Query Integration" tokens: 450 next: [nextjs_integration, subscriptions] - id: nextjs_integration title: "Next.js App Router Integration" tokens: 500 next: [subscriptions, file_uploads] - id: subscriptions