---
name: t3-stack-builder
description: "Next.js + tRPC + Prisma + NextAuth + Tailwind — end-to-end type safety from DB to UI. Scaffolds T3 apps with tRPC routers, Prisma schemas, NextAuth providers, and Tailwind config — full type safety from the database to the React component."
license: MIT
---

# T3 Stack Builder

T3 Stack Builder scaffolds and extends apps built on the T3 stack — Next.js, tRPC, Prisma, NextAuth.js, and Tailwind CSS — wiring them together so types flow unbroken from your database schema to your React components. It's for developers who like `create-t3-app`'s opinions but don't want to hand-write every new router, model, and auth provider afterward. You describe the feature; it generates the Prisma model, the tRPC procedures, and the typed client hooks that consume them.

## When to use it

- Starting a new T3 project and you want App Router, a configured `prisma/schema.prisma`, and a working NextAuth setup on day one.
- Adding a new resource (say, `Post` or `Organization`) and you'd otherwise repeat the model → router → `api.x.useQuery()` ceremony by hand.
- Bolting a new OAuth provider (GitHub, Google, Discord) onto an existing `authOptions`.
- Splitting a growing `appRouter` into feature routers without breaking the inferred `AppRouter` type.

## What it does

- Runs `create-t3-app` style scaffolding with sensible defaults: App Router or Pages Router, `@trpc/server`/`@trpc/react-query`, Prisma client singleton, and Tailwind preflight.
- Generates tRPC routers using `createTRPCRouter`, `publicProcedure`, and `protectedProcedure`, with Zod input validation on each procedure.
- Writes Prisma models into `schema.prisma` and reminds you to run `prisma migrate dev` / `prisma generate`.
- Configures NextAuth providers and the Prisma adapter in `src/server/auth.ts`, including session callbacks that attach `user.id`.
- Keeps the `RouterInputs` / `RouterOutputs` inference helpers intact so the frontend stays fully typed.

## Usage example

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/t3-stack-builder/SKILL.md https://claudeskil.com/skills/t3-stack-builder/SKILL.md

# then, in a chat:
"Scaffold a new T3 app called taskly with the GitHub provider and a Task model
(title, done boolean, owner relation to User). Add a task router with list,
create, and toggle procedures behind protectedProcedure."
```

Generated procedure shape:

```ts
toggle: protectedProcedure
  .input(z.object({ id: z.string() }))
  .mutation(({ ctx, input }) =>
    ctx.db.task.update({ where: { id: input.id }, data: { done: { /* flip */ } } })),
```

## Tips & gotchas

- Generated procedures reference `ctx.db` and `ctx.session`; the skill assumes the standard `createTRPCContext`. If you renamed `prisma` to `db` (or vice versa), tell it.
- It edits `schema.prisma` but does **not** run migrations — review the diff, then run `npx prisma migrate dev` yourself.
- `protectedProcedure` relies on the session callback exposing `session.user.id`. If auth was scaffolded elsewhere, verify that callback exists.
- Adding a provider needs the matching `AUTH_*` env vars; the skill updates `.env.example`, not your real `.env`.

## FAQ

**Does it support the App Router?** Yes — it targets the current `create-t3-app` layout with `src/app` and Server Components, and also handles legacy Pages Router projects.

**Can I use it on an existing repo?** Yes. Point it at a repo that already follows the T3 conventions; it appends routers and models rather than overwriting.

**Postgres, MySQL, or SQLite?** Whatever your `datasource db` provider is set to — it writes provider-agnostic Prisma models and leaves the connection to your config.