What this prompt does
This prompt scaffolds a full-stack Next.js App Router CRUD application for one resource, wiring the database, server logic, and UI together. It generates a Prisma schema, Server Actions for create/read/update/delete, Server Components for fetching, Client Components for forms, authentication, optimistic UI with useOptimistic, error boundaries and loading skeletons, styling, search/pagination/sorting, and Zod validation shared between client and server.
The variables pin the stack. [nextjs_version] and [resource_name] define the target and the entity, [database] sets what Prisma connects to, and [form_library] (react-hook-form) handles form state. [auth_provider] chooses the auth solution and [styling] the visual approach (Tailwind plus shadcn/ui). The standout design choice is shared Zod validation: the same schema runs on the client and inside Server Actions, so the two can't drift out of sync. Optimistic updates with useOptimistic plus proper loading.tsx and error boundaries make the app feel fast and resilient, and getting auth middleware in from the start avoids a painful retrofit.
When to use it
- Spinning up a new App Router feature with full CRUD quickly
- Building forms whose validation is guaranteed identical on client and server
- Adding optimistic UI so actions feel instant before the server confirms
- Scaffolding a resource that needs search, pagination, and sorting out of the box
- Setting up auth-protected routes via middleware from day one
- Establishing a Server Actions plus Prisma pattern other features can follow
Example output
You get a Prisma schema for [resource_name] targeting [database], a set of Server Actions for each CRUD operation, Server Components that fetch and render data, Client Components with [form_library] forms, auth wiring via [auth_provider], optimistic update handling, loading.tsx skeletons, error boundaries, and [styling]-based responsive UI. Zod schemas are imported by both the client form and the server action. Middleware protects the routes. The result is a coherent vertical slice rather than disconnected snippets.
Pro tips
- Set
[nextjs_version]accurately; App Router APIs like useOptimistic and Server Actions have shifted across versions, and a mismatch causes runtime errors - Keep one Zod schema per resource and import it in both places — that single source of truth is the whole point of the shared-validation approach
- Confirm the
[auth_provider]version matches your install (NextAuth v5 differs significantly from v4) before running the generated middleware - Use optimistic updates only where a failure is recoverable; for destructive actions, prefer confirming with the server first
- Verify the Prisma schema's relations and indexes for your
[database]; the AI infers a reasonable shape but won't know your query patterns - Treat loading.tsx and error boundaries as required, not optional — they're what keep the UI solid when a fetch is slow or fails
