A production-grade Next.js starter built for AI-assisted development with Claude Code. Pick your design system, generate your foundation, describe your features, and let autonomous agents build them — with design-system enforcement and validation baked in.
Built by StructuPath to help people getting started with modern web development, especially folks coming from non-software industries. You don't need years of frontend experience — the template makes the decisions experienced developers would make, and Claude Code does the heavy lifting.
- ⚡ Next.js 16 with App Router and Turbopack
- ⚛️ React 19 with Server Components
- 🔒 TypeScript in strict mode
- 🎨 Tailwind CSS v4 (CSS-first config) with dark mode support
- 🔐 NextAuth.js v5 (Auth.js) - GitHub, Google, email auth
- 🗄️ Prisma 7 - Type-safe ORM, SQLite out of the box, easy switch to Postgres
- ⚙️ @t3-oss/env-nextjs - Type-safe environment variables
- 📝 React Hook Form + Zod 4 - Forms with validation
- 🎯 shadcn/ui-ready - Radix primitives + components.json generated for you
- 🌟 Motion (Framer Motion's successor) - Smooth animations
- 📁 React Dropzone - File upload handling
- 🏪 Zustand 5 - Client state management
- 🔄 TanStack Query 5 - Server state, caching, mutations
- 📡 Axios - HTTP client
- 🧪 Vitest 4 + Testing Library - Fast testing
- 🛠️ ESLint + Prettier - Code quality with design-system lint rules
- 🪝 Husky + lint-staged - Git hooks
- 🤖 Claude Code agents + commands - The autonomous development workflow below
- Node.js 20.9 or later
- Claude Code (for the AI workflow — the template also works as a plain Next.js starter)
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env
# Edit .env with your values (generate an auth secret with: npx auth secret)Then open the project in Claude Code and run the setup commands in order:
| Step | Command | What it does |
|---|---|---|
| 1 | /1-setup-design |
Choose colors, fonts, spacing → generates DESIGN_SYSTEM.md |
| 2 | /2-setup-foundation |
Generates globals.css (Tailwind v4 tokens), layout.tsx, shadcn config |
| 3 | /2b-setup-backend |
Database models, Prisma client, auth wiring |
| 4 | /3-setup-features |
Interactive planning session → creates FEATURES.md |
| 5 | /4-start-features |
Launches parallel Claude instances, one per feature, in isolated git worktrees |
Along the way:
npm run dev # Start development server
npm run build # Production build
npm test # Run testsThe most common failure mode of AI-generated UI is inconsistency — random colors, mixed fonts, arbitrary spacing. This template prevents that mechanically:
/1-setup-designlocks in a palette (8 proven themes or your brand colors), a font pairing, and a spacing scale./2-setup-foundationturns those into Tailwind v4 design tokens (bg-primary,font-heading,p-ds-2, …).- ESLint rules and a Claude Code hook reject hardcoded hex colors, arbitrary pixel values, and off-system fonts as agents write code.
Agents literally can't drift from your design system without being flagged.
| File | Purpose |
|---|---|
CLAUDE.md |
Development rules every agent follows |
CAPABILITIES.md |
Pre-installed packages — prevents agents from installing duplicates |
DESIGN_SYSTEM_TEMPLATE.md |
Template consumed by /1-setup-design |
FEATURES.example.md |
Example of a well-written feature specification |
.claude/agents/ |
Builders (foreman, framer, engineer, detailer), inspectors (inspector-ui, inspector-api), and punch-list for fixes |
.claude/commands/ |
The numbered setup workflow plus utilities |
FEATURES.md
│ /4-start-features
▼
One git worktree + one Claude instance per feature
│
▼
Builders — foreman, framer, engineer, detailer (todo → in_progress → coding_done)
│
▼
Inspectors — inspector-ui, inspector-api (coding_done → validated | needs_fixes)
│ │
▼ ▼
/merge-feature ◄────────── punch-list fixes → re-inspect
Each feature is built on its own branch in .worktrees/, validated against the design system and backend standards, then merged back with /merge-feature. Check progress anytime with /feature-status.
⚠️ /4-start-featureslaunches background Claude instances with--dangerously-skip-permissionsinside their isolated worktrees. Read that command file and make sure you're comfortable with it before running it on a machine with sensitive data.
npm run dev/npm run build/npm run start
npm run lint/npm run lint:fix- ESLint (includes design-system rules)npm run type-check- TypeScriptnpm run format/npm run format:check- Prettier
npm run db:push- Push schema to databasenpm run db:generate- Generate Prisma client (outputs tosrc/generated/prisma)npm run db:migrate- Run migrationsnpm run db:studio- Database GUI
npm test/npm run test:ui/npm run test:coverage
npm run analyze- Bundle size analysis
├── CLAUDE.md # Agent development rules
├── CAPABILITIES.md # Pre-installed package reference
├── DESIGN_SYSTEM_TEMPLATE.md # Consumed by /1-setup-design
├── FEATURES.example.md # Example feature spec
├── prisma/schema.prisma # Database schema
├── prisma.config.ts # Prisma 7 config
├── .claude/
│ ├── agents/ # Builder + validation agents
│ ├── commands/ # Setup workflow commands
│ ├── hooks/ # Design-system enforcement hook
│ └── scripts/ # Design system + foundation generators
└── src/ # Created by the setup commands
├── app/ # App Router (layout, pages, api routes)
├── components/ # UI components (incl. shadcn under ui/)
├── lib/ # auth.ts, prisma.ts, utils.ts
└── stores/ # Zustand stores
MIT — see LICENSE. Use it, fork it, build your business on it.
The multi-agent build/inspect workflow draws on ideas from the agentic-coding community, including Ken Kai's Queen Claude setup. This template is an independent implementation — all code and documentation here were written from scratch for this project.
Questions or ideas? Open an issue. This template is maintained by StructuPath — AI and software for the building trades.