AI SummaryProvides expert guidance on tRPC setup, type-safe API development, and React Query integration. Ideal for TypeScript developers building full-stack applications who want to eliminate manual type definitions and schema synchronization.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "trpc" skill in my project. Please run this command in my terminal: # Install skill into your project (2 files) mkdir -p .claude/skills/trpc && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/trpc/SKILL.md "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/trpc/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/trpc/metadata.json "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/trpc/metadata.json" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Auto-activates when user mentions tRPC, type-safe APIs, procedures, or tRPC routers. Expert in tRPC including router setup, procedures, middleware, and React Query integration.
tRPC - End-to-End Type-Safe APIs
tRPC enables you to build fully type-safe APIs without code generation or schema files. It provides automatic type inference from server to client, making TypeScript work seamlessly across your full stack. Official Documentation: https://trpc.io ---
What is tRPC?
tRPC is a TypeScript-first framework for building type-safe APIs using Remote Procedure Calls (RPC). Unlike REST or GraphQL, tRPC eliminates the need for: • ❌ Manual type definitions • ❌ Code generation • ❌ Schema synchronization • ❌ API contracts Instead, you get: • ✅ End-to-end type safety: Types flow automatically from server to client • ✅ Autocomplete everywhere: Full IntelliSense for all your API calls • ✅ Instant feedback: TypeScript errors when your API changes • ✅ Zero runtime overhead: Type information is stripped at build time ---
Server Initialization
Initialize tRPC exactly once per application to avoid conflicts: `typescript // server/trpc.ts import { initTRPC } from '@trpc/server'; // Initialize tRPC const t = initTRPC.create(); // Export router and procedure builders export const router = t.router; export const publicProcedure = t.procedure; ` ✅ Good: Single initialization per app `typescript // server/trpc.ts const t = initTRPC.create(); export const router = t.router; export const publicProcedure = t.procedure; ` ❌ Bad: Multiple tRPC instances `typescript // ❌ Don't do this! const t1 = initTRPC.create(); const t2 = initTRPC.create(); // Causes conflicts `
Creating Your First Router
Define routers with procedures (API endpoints): `typescript // server/routers/_app.ts import { router, publicProcedure } from '../trpc'; import { z } from 'zod'; export const appRouter = router({ // Query: fetch data greeting: publicProcedure .input(z.object({ name: z.string() })) .query(({ input }) => { return { message: Hello ${input.name}! }; }), // Mutation: modify data createUser: publicProcedure .input(z.object({ email: z.string().email(), name: z.string(), })) .mutation(async ({ input }) => { // Create user in database return { id: '1', ...input }; }), }); // Export type for client export type AppRouter = typeof appRouter; `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster