Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →sickn33/trpc-fullstack
Build end-to-end type-safe APIs with tRPC — routers, procedures, middleware, subscriptions, and Next.js/React integration patterns.
Passed 23 of 23 test cases with the skill, and 21 of 23 without it.
2 fixed21 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
In our React component, after creating a new post through a mutation hook, the post list on screen does not update automatically. A junior developer suggested calling `window.location.reload()` inside `onSuccess` to force the page to fetch fresh data. Provide a React component demonstrating how to handle post creation and keep the UI updated.
| Checked | Without skill | With skill |
|---|---|---|
| The component accesses query utilities using trpc.useUtils. | Missed | Passed |
| The onSuccess callback invalidates the post list query cache instead of reloading the page. | Passed | Passed |
The instructions your model reads when the skill loads.
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.
A router groups related procedures (think: endpoints). Procedures are typed functions — query for reads, mutation for writes, subscription for real-time streams.
All procedure inputs are validated with Zod schemas. The validated, typed input is available in the procedure handler — no manual parsing.
context is shared state passed to every procedure — auth session, database client, request headers, etc. It is built once per request in a context factory. Important: Next.js App Router and Pages Router require separate context factories because App Router handlers receive a fetch Request, not a Node.js NextApiRequest.
Middleware chains run before a procedure. Use them for authentication, logging, and request enrichment. They can extend the context for downstream procedures.
npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query zod
test cases passed, vs 21 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.