frontend-api-contracts

Designs tRPC procedure contracts with Drizzle query shapes for T3 Turbo monorepos.

Updated Aug 2, 2026
One-click install
npx skills add https://github.com/leonardoacosta/skills --skill frontend-api-contracts-leonardoacosta
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-api-contracts
Source: https://github.com/leonardoacosta/skills/tree/main/t3-stack-kit/skills/frontend-api-contracts
Command: npx skills add https://github.com/leonardoacosta/skills --skill frontend-api-contracts-leonardoacosta

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend and backend teams in a T3 Turbo monorepo (Next.js, tRPC, Drizzle) often drift apart on API expectations: frontend assumes relations are populated, types are redeclared manually, and pagination behavior is ambiguous. This Skill produces a concrete, written procedure contract covering input schema, output shape, auth, and Drizzle query notes before implementation begins. ## Core Features & Use Cases - Type-safe contract rules: Enforces inferring types via RouterOutputs/RouterInputs instead of redeclaring shapes that silently drift. - Drizzle query shape guidance: Documents exactly what with: clauses, findFirst vs findMany, and nullable columns produce at runtime, including N+1 risks. - Calibrated design thresholds: Provides defaults for when to extend vs split procedures and when to use cursor vs offset pagination, with the reasoning behind each number. - Use Case: Before building an event attendee list, spec the event.attendees.list procedure with cursor pagination, nested user.profile eager loading, and invalidation rules using the included template and worked example. ## Quick Start Ask the agent to spec the tRPC API contract for a new feature, for example: design the procedure contract for an event attendee list with pagination in my T3 Turbo app.

Frequently Asked Questions about frontend-api-contracts

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

FAQPage Schema
How do I design a tRPC procedure contract for a new feature?

Define the trigger, auth level, and query-versus-mutation type, then write the Zod input schema and describe the output shape including which relations are populated. Use the included template in references/template.md, which provides a blank structure and a complete worked example.

How do I share types between tRPC backend and Next.js frontend?

Infer types from the router using RouterOutputs and RouterInputs exported from the API package, never redeclare shapes manually. Manual type declarations drift silently when the backend changes, while inferred types fail at compile time.

Why is my Drizzle relation field undefined in the tRPC response?

Drizzle only populates relations explicitly listed in the query's with clause; unspecified relations are absent entirely, not null or undefined. The contract must state every required with clause, including nested relations like user.profile, to avoid N+1 queries.

When should I use cursor vs offset pagination in tRPC?

Use cursor pagination by default for feeds and lists since it stays stable under concurrent inserts. Use offset only when the dataset is small (under roughly 500 rows) and the UI needs random page access like jump-to-page-5 controls.

When should I split a tRPC procedure instead of extending it?

Split when a procedure's with clause loads more than about three relations, signaling it serves multiple distinct UI needs. Extend an existing procedure when multiple consumers need the same field and the added join cost is acceptable for all callers.