trpc

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

14|5|Updated Jan 29, 2026

Search Tags:#typescript #full-stack #frontend #api #backend #trpc #type-safety

Ready to run

npx skills add https://github.com/oakoss/agent-skills --skill trpc-oakoss

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: trpc
Source: https://github.com/oakoss/agent-skills/tree/main/skills/trpc
Command: npx skills add https://github.com/oakoss/agent-skills --skill trpc-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the development of type-safe APIs in TypeScript applications, eliminating the need for manual type synchronization between frontend and backend.

Core Features & Use Cases

Type Safety: Ensures consistency between server and client code, preventing runtime errors.
Procedure Definitions: Define queries, mutations, and subscriptions with clear input/output validation.
Use Case: When building a full-stack TypeScript application, use this Skill to define your API routes and ensure that your React frontend can call them with confidence, knowing the types are always in sync.

Quick Start

Use the trpc skill to define a new query procedure named 'getUsers' that returns a list of user objects.

Frequently Asked Questions about trpc

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

FAQPage Schema

How do I share API types between a TypeScript frontend and backend without code generation?▼

Share API types without code generation by defining tRPC routers and procedures on the server and importing those inferred types directly into your client. This ensures type consistency and prevents runtime errors.

How do I validate inputs in a type-safe TypeScript API?▼

Validate inputs in a type-safe TypeScript API by defining input schemas with Zod within your tRPC procedure definitions. This approach validates incoming requests and automatically infers TypeScript types for backend resolvers.

Can I use tRPC with React Query for data fetching and mutations?▼

Yes, you can use tRPC with React by integrating the @trpc/react-query client. This provides fully typed React hooks for queries, mutations, and subscriptions, ensuring frontend calls maintain strict type safety.

What is the best way to handle API errors in a full-stack TypeScript application?▼

Handle API errors in full-stack TypeScript by throwing the built-in TRPCError within your server-side procedures. This standardizes error handling and ensures typed error responses propagate to the client.

Does tRPC support subscriptions for real-time data in TypeScript?▼

Yes, tRPC supports subscriptions for real-time data in TypeScript. You define subscription procedures on your router to maintain a type-safe stream of events pushed from the backend to connected frontend clients.