Agent Skills

trpc-router

Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData.

Install

npx skills add https://github.com/trpc/trpc --skill trpc-router
SKILL.md

tRPC -- Skill Router

Decision Tree

What are you trying to do?

Define a tRPC backend (server)

  • Initialize tRPC, define routers, procedures, context, export AppRouter -> Load skill: server-setup

  • Add middleware (.use), auth guards, logging, base procedures -> Load skill: middlewares

  • Add input/output validation with Zod or other libraries -> Load skill: validators

  • Throw typed errors, format errors for clients, global error handling -> Load skill: error-handling

  • Call procedures from server code, write integration tests -> Load skill: server-side-calls

  • Set Cache-Control headers on query responses (CDN, browser caching) -> Load skill: caching

  • Accept FormData, File, Blob, or binary uploads in mutations -> Load skill: non-json-content-types

  • Set up real-time subscriptions (SSE or WebSocket) -> Load skill: subscriptions

Host the tRPC API (adapters)

  • Node.js built-in HTTP server (simplest, local dev) -> Load skill: adapter-standalone

  • Express middleware -> Load skill: adapter-express

  • Fastify plugin -> Load skill: adapter-fastify

  • AWS Lambda (API Gateway v1/v2, Function URLs) -> Load skill: adapter-aws-lambda

  • Fetch API / Edge (Cloudflare Workers, Deno, Vercel Edge, Astro, Remix) -> Load skill: adapter-fetch

Consume the tRPC API (client)

  • Create a vanilla TypeScript client, configure links, headers, types -> Load skill: client-setup

  • Configure link chain (batching, streaming, splitting, WebSocket, SSE) -> Load skill: links

  • Use SuperJSON transformer for Date, Map, Set, BigInt -> Load skill: superjson

Use tRPC with a framework

  • React with TanStack Query (useQuery, useMutation, queryOptions) -> Load skill: react-query-setup

  • Next.js App Router (RSC, server components, HydrateClient) -> Load skill: nextjs-app-router

  • Next.js Pages Router (withTRPC, SSR, SSG helpers) -> Load skill: nextjs-pages-router

Advanced patterns

  • Generate OpenAPI spec, REST client from tRPC router -> Load skill: openapi

  • Multi-service gateway, custom routing links, SOA -> Load skill: service-oriented-architecture

  • Auth middleware + client headers + subscription auth -> Load skill: auth

Quick Reference: Minimal Working App

// server/trpc.ts
import { initTRPC } from '@trpc/server';

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;
// server/appRouter.ts
import { z } from 'zod';
import { publicProcedure, router } from './trpc';

export const appRouter = router({
  hello: publicProcedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => ({ greeting: `Hello ${input.name}` })),
});

export type AppRouter = typeof appRouter;
// server/index.ts
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './appRouter';

const server = createHTTPServer({ router: appRouter });
server.listen(3000);
// client/index.ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server/appRouter';

const trpc = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'http://localhost:3000' })],
});

const result = await trpc.hello.query({ name: 'World' });

See Also

  • server-setup -- full server initialization details
  • client-setup -- full client configuration
  • adapter-standalone -- simplest adapter for getting started
  • react-query-setup -- React integration
  • nextjs-app-router -- Next.js App Router integration

Related skills

entra-app-registrationmicrosoft606KGuides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.azure-messagingmicrosoft595KTroubleshoot and resolve issues with Azure Messaging SDKs for Event Hubs and Service Bus. Covers connection failures, authentication errors, message processing issues, and SDK configuration problems. WHEN: event hub SDK error, service bus SDK issue, messaging connection failure, AMQP error, event processor host issue, message lock lost, message lock expired, lock renewal, lock renewal batch, send timeout, receiver disconnected, SDK troubleshooting, azure messaging SDK, event hub consumer, servicentra-agent-idmicrosoft328KProvision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmi_path, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmi_path token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registsupabasesupabase298KUse when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, declarative schemas, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector); deb

Search skills and MCP servers

Fuzzy search across 23,137 skills and servers