# Trpc

> Build type-safe APIs with tRPC, covering procedures, routers, middleware, React integration, subscriptions, and error handling.

- Skill: `majiayu000/trpc` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/trpc`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/trpc/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Coding & Dev Tools, API Design, Frontend Frameworks
- Tags: Nextjs, React, Rpc, Trpc, Type Safety, Typescript, Zod
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/majiayu000/trpc

---


# tRPC Skill

Expert assistance for building type-safe APIs with tRPC.

## Capabilities

- Create type-safe procedures and routers
- Implement middleware for auth/validation
- Set up tRPC with Next.js/React
- Handle subscriptions
- Configure error handling
- Build type-safe client hooks

## Usage

Invoke this skill when you need to:
- Build end-to-end type-safe APIs
- Integrate with React/Next.js
- Replace REST with type-safe RPC
- Implement real-time features

## Patterns

### Router Definition

```typescript
// server/trpc/routers/user.ts
import { z } from 'zod';
import { router, publicProcedure, protectedProcedure } from '../trpc';
import { TRPCError } from '@trpc/server';

export const userRouter = router({
  list: protectedProcedure
    .input(z.object({
      page: z.number().min(1).default(1),
      limit: z.number().min(1).max(100).default(10),
      search: z.string().optional(),
    }))
    .query(async ({ ctx, input }) => {
      const users = await ctx.prisma.user.findMany({
        where: input.search
          ? { name: { contains: input.search } }
          : undefined,
        skip: (input.page - 1) * input.limit,
        take: input.limit,
      });
      return users;
    }),

  byId: protectedProcedure
    .input(z.string())
    .query(async ({ ctx, input }) => {
      const user = await ctx.prisma.user.findUnique({
        where: { id: input },
      });
      if (!user) {
        throw new TRPCError({ code: 'NOT_FOUND' });
      }
      return user;
    }),

  create: protectedProcedure
    .input(z.object({
      name: z.string().min(1),
      email: z.string().email(),
    }))
    .mutation(async ({ ctx, input }) => {
      return ctx.prisma.user.create({ data: input });
    }),
});
```

### React Integration

```typescript
// In component
const { data, isLoading } = trpc.user.list.useQuery({ page: 1 });
const createUser = trpc.user.create.useMutation();

<button onClick={() => createUser.mutate({ name, email })}>
  Create
</button>
```

## Best Practices

- Use Zod for input validation
- Implement proper middleware
- Leverage type inference
- Handle errors consistently

## Target Processes

- t3-stack-development
- nextjs-full-stack
- type-safe-api