skills.rest
Hollowvyn
HollowvynOFFICIAL
Explore all skills by this author →
GitHub

trpc-type-safety

Share tRPC router types between TypeScript client and server with Zod validation.

Updated May 20, 2026
Search Tags:#zod#nextjs#trpc#type-safety#react-query#api-development#full-stack-typescript
One-click install
npx skills add https://github.com/Hollowvyn/cognipace-v2 --skill trpc-type-safety-hollowvyn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: trpc-type-safety
Source: https://github.com/Hollowvyn/cognipace-v2/tree/main/.agents/skills/trpc
Command: npx skills add https://github.com/Hollowvyn/cognipace-v2 --skill trpc-type-safety-hollowvyn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates mismatches between client and server data shapes by providing end-to-end TypeScript type safety for remote procedures.

Core Features & Use Cases

  • End-to-End Type Inference (No Codegen): Define API procedures once and get automatic types on the client from the shared router definitions.
  • Zod Runtime Validation: Validate inputs (and optionally outputs) at runtime while keeping TypeScript types in sync.
  • React Query Integration: Use tRPC hooks for query/mutation caching, invalidation, and consistent request state.
  • Full-Stack Patterns: Organize nested routers, add middleware for auth/logging/rate-limiting, and implement robust error handling with TRPCError.

Quick Start

Ask your AI to show you how to define a tRPC router with Zod-validated input, generate an AppRouter type, and call it from a React Query-powered client hook.

Frequently Asked Questions about trpc-type-safety

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I achieve end-to-end type safety in a full-stack TypeScript app without code generation?▼

You achieve end-to-end type safety in full-stack TypeScript by sharing tRPC router and procedure types directly between client and server, eliminating the need for code generation while keeping data shapes synchronized.

How does Zod runtime validation work with tRPC input schemas?▼

Zod runtime validation in tRPC validates procedure inputs on the server while automatically inferring the matching TypeScript types for the client, keeping runtime checks and static types in sync.

Can I use tRPC with React Query for data fetching and caching in Next.js?▼

Yes, tRPC integrates with React Query to provide typed client hooks for queries, mutations, and caching, allowing you to manage request state and invalidation automatically in Next.js or other server adapters.

What is the best way to organize tRPC routers and add auth middleware?▼

The best way to organize tRPC routers is by nesting them, wiring context and middleware for auth, logging, or rate-limiting, and implementing robust error handling using TRPCError for remote procedures.

Does tRPC type safety work for internal apps or is it designed for public APIs?▼

tRPC type safety is designed for internal full-stack TypeScript apps where the client and server share the same codebase, rather than for public APIs where external clients consume the endpoints.

Related Skills

Explore More Software Engineering Skills→
oakossoakoss
14

trpc

Create end-to-end type-safe APIs in TypeScript with shared types.

Official
Advanced
AgentiveCityAgentiveCity
2

nextjs-data-fetching-and-caching

Configure data fetching and caching in Next.js App Router applications.

Official
Intermediate
devturcodevturco

debug

Trace frontend-to-backend data flow across tRPC, auth middleware, and Drizzle.

Community
Intermediate
monobaselabsmonobaselabs

typespec

Develop TypeSpec API definitions and generate OpenAPI specs, TypeScript types, validators, routes, and handler stubs.

Official
Advanced