From sage
Integration patterns for Next.js + Tailwind CSS + Prisma + Auth.js — the seams between frameworks
How this skill is triggered — by the user, by Claude, or both
Slash command
/sage:stack-nextjs-fullstackThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Layer 3 — Stack Composition**
Layer 3 — Stack Composition
Integration patterns for the most common Next.js fullstack combination: Next.js App Router + Tailwind CSS + Prisma ORM + Auth.js.
Individual framework docs tell you how each tool works in isolation. They don't tell you how they work TOGETHER. Where does the Prisma client go in a Next.js project? How does Auth.js middleware interact with App Router layouts? What happens when Tailwind's utility classes meet server components?
These integration points — the seams between frameworks — are where most bugs live. Each framework team documents their own tool. Nobody documents the gaps between tools. That's what this pack does.
| Type | Files | Coverage |
|---|---|---|
| Integration patterns | 4 | Prisma + Next.js, Auth.js + Next.js, Tailwind + Next.js, Full-stack project structure |
| Anti-patterns | 3 | Prisma client instantiation, auth in wrong layer, Tailwind in server components |
| Constitution | 1 | 5 stack integration principles |
This pack requires web, react, and nextjs to be
installed. It activates when the codebase-scan detects Next.js, Tailwind CSS,
and Prisma in the project dependencies.
npx claudepluginhub xoai/sage --plugin sageActs as master reference combining Next.js 16, Prisma 7, Better Auth, shadcn/ui, TanStack Form, and Zustand for full-stack development.
Implements Next.js 14/15 App Router patterns including server components, data fetching, caching, and server actions. Activates when Next.js, Supabase, Prisma, or Tailwind CSS are detected.
Provides production patterns for Next.js App Router including file-based routing, server/client components, data fetching strategies, authentication, and full-stack deployment from database to UI.