trpc-fullstack
Build end-to-end type-safe APIs with tRPC — routers, procedures, middleware, subscriptions, and Next.js/React integration patterns.
Profile →npx skills add sickn33/agentic-awesome-skills --skill trpc-fullstack --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# tRPC Full-Stack ## Overview tRPC lets you build fully type-safe APIs without writing a schema or code-generation step. Your TypeScript types flow from the server router directly to the client — so every API call is autocompleted, validated at compile time, and refactoring-safe. Use this skill when building TypeScript monorepos, Next.js apps, or any project where the server and client share a codebase. ## When to Use This Skill - Use when building a TypeScript full-stack app (Next.js, Remix, Express + React) where the client and server share a single repo - Use when you want end-to-end type safety on API calls without REST/GraphQL schema overhead - Use when adding real-time features (subscriptions) to an existing tRPC setup - Use when designing multi-step middleware (auth, rate limiting, tenant scoping) on tRPC procedures - Use when migrating an existing REST/GraphQL API to tRPC incrementally ## Core Concepts ### Routers and Procedures A **router** groups related **procedures** (think: endpoints). Procedures are typed functions — `query` for reads, `mutation` for writes, `subscription` for real-time streams. ### Input Validation with Zod All procedure inputs are validated with Zod
- Overview
- When to Use This Skill
- Core Concepts
- Routers and Procedures
- Input Validation with Zod
- Context
- Middleware
- How It Works
- Step 1: Install and Initialize
- Step 2: Define Two Context Factories
- Step 3: Build an Auth Middleware and Protected Procedure
- Step 4: Create Routers
- Step 5: Compose the Root Router and Export Types
- Step 6: Mount the API Handler (Next.js App Router)
npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query zod
What does the trpc-fullstack skill do?
Build end-to-end type-safe APIs with tRPC — routers, procedures, middleware, subscriptions, and Next.js/React integration patterns.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill trpc-fullstack --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.