Skip to main content

nextjs-stack

Next.js 16+ complete stack with App Router, Prisma 7, Better Auth, shadcn/ui, TanStack Form, Zustand. Use as the master reference combining all framework skills.

Stars
13
Source
fusengine/agents
Updated
2026-05-17
Slug
fusengine--agents--nextjs-stack
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/fusengine/agents/HEAD/plugins/nextjs-expert/skills/nextjs-stack/SKILL.md -o .claude/skills/nextjs-stack.md

Drops the SKILL.md into .claude/skills/nextjs-stack.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

Serves as the master reference tying together the complete recommended Next.js 16+ technology stack: App Router (nextjs-16), Prisma 7 (prisma-7), Better Auth 1.2 (better-auth), shadcn/ui 3.8.0 (nextjs-shadcn), TanStack Form (nextjs-tanstack-form), Zustand (nextjs-zustand), Tailwind CSS 4, and next-intl 4.0 (nextjs-i18n) — pointing to the right sub-skill for each layer rather than duplicating their content.

Documents forbidden substitutions (NextAuth.js instead of Better Auth, Pages Router instead of App Router, React Hook Form instead of TanStack Form, Client-Components-by-default instead of Server-first) and provides reference material for stack-decision justification, SOLID module structure, cross-part integration points, and project bootstrapping. Does not cover core framework API details like routing internals, caching, or proxy.ts — those live in nextjs-16.

Next.js Complete Stack

Master skill combining all framework documentation for modern Next.js development.

Agent Workflow (MANDATORY)

Before ANY implementation, use TeamCreate to spawn 3 agents:

  1. fuse-ai-pilot:explore-codebase - Analyze project structure and existing patterns
  2. fuse-ai-pilot:research-expert - Verify latest docs for all stack technologies
  3. mcp__context7__query-docs - Check integration compatibility

After implementation, run fuse-ai-pilot:sniper for validation.


Overview

When to Use

  • Starting a new Next.js 16 project from scratch
  • Need the complete recommended technology stack
  • Building production applications with authentication
  • Implementing forms, state management, and UI components
  • Understanding how all parts fit together

Technology Stack

Layer Technology Skill Reference
Framework Next.js 16 (App Router) nextjs-16
Database ORM Prisma 7 prisma-7
Authentication Better Auth 1.2 better-auth
UI Components shadcn/ui 3.8.0 nextjs-shadcn
Forms TanStack Form nextjs-tanstack-form
State Zustand nextjs-zustand
Styling Tailwind CSS 4 tailwindcss
i18n next-intl 4.0 nextjs-i18n

Forbidden Patterns

  • NextAuth.js - Use Better Auth instead
  • Pages Router - Use App Router for new projects
  • React Hook Form - Use TanStack Form
  • Client Components by default - Server Components first

References

Detailed guidance lives in references/ to keep this file scannable — load only what the task needs:

File Load when…
references/stack-decisions.md Justifying a technology choice (Better Auth vs NextAuth, Prisma vs Drizzle, TanStack Form vs RHF, Zustand vs Redux, shadcn/ui vs MUI)
references/solid-architecture.md Setting up or reviewing the project's module/folder structure
references/integration-points.md Wiring two parts of the stack together (auth+DB, forms+UI, state+RSC, i18n+routing)
references/quick-reference.md Looking up which sub-skill file covers a specific feature (App Router, Prisma schema, Better Auth OAuth, …)
references/best-practices.md Doing a final review pass before shipping
references/getting-started.md Bootstrapping a brand-new project step by step

For framework-specific detail, go directly to the sub-skill: nextjs-16, prisma-7, better-auth, nextjs-shadcn, nextjs-tanstack-form, nextjs-zustand, nextjs-i18n, solid-nextjs.