fusengine/nextjs-stack
plugins/nextjs-expert/skills/nextjs-stack/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add fusengine/agents nextjs-stackInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 5, 2026, 12:07 AM13.0s1 file scanned
SKILL.md
- name:
- nextjs-stack
- description:
- 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.
- nextjs:
- 16
- react:
- 19
- prisma:
- 7
- better-auth:
- 1.2
- shadcn-ui:
- 3.8.0
- tailwindcss:
- 4
- user-invocable:
- true
- related-skills:
- nextjs-16, prisma-7, better-auth, nextjs-shadcn, nextjs-tanstack-form, nextjs-zustand, nextjs-i18n, solid-nextjs
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:
- fuse-ai-pilot:explore-codebase - Analyze project structure and existing patterns
- fuse-ai-pilot:research-expert - Verify latest docs for all stack technologies
- 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 |
Stack Decisions
Why These Technologies
| Choice | Reason | |--------|--------| | Better Auth over NextAuth.js | TypeScript-first, plugin system, self-hosted | | Prisma 7 over Drizzle | Mature ecosystem, migrations, studio | | TanStack Form over React Hook Form | Modern API, server actions, type safety | | Zustand over Redux/Context | Minimal boilerplate, SSR-friendly | | shadcn/ui over MUI/Chakra | Copy/paste ownership, Radix primitives |
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
SOLID Architecture
Project Structure
src/
├── app/ # Route handlers only
│ ├── [locale]/ # i18n routing
│ ├── api/ # API routes
│ └── layout.tsx # Root layout
├── modules/
│ ├── cores/ # Shared infrastructure
│ │ ├── i18n/ # Internationalization
│ │ ├── shadcn/ # UI components
│ │ ├── lib/ # Utilities (cn, etc.)
│ │ └── db/ # Prisma client
│ ├── auth/ # Authentication module
│ └── [feature]/ # Feature modules
└── proxy.ts # Route protection
Module Pattern
Each feature module contains:
- src/services/ - Business logic
- src/hooks/ - React hooks
- src/components/ - UI components
- src/interfaces/ - TypeScript types
Integration Points
Authentication + Database
Better Auth integrates with Prisma adapter for user storage. Schema in prisma/schema.prisma includes User, Session, Account, Verification tables.
Forms + UI + Validation
TanStack Form with Zod validation using shadcn/ui Field components. Server Actions for form submission.
State + Server Components
Zustand stores for client state only. Server Components fetch data directly. No global state for server data.
i18n + Routing
next-intl with [locale] segment. proxy.ts handles locale detection and redirects.
Quick Reference
Next.js 16
| Feature | Reference |
|---------|-----------|
| App Router | nextjs-16/app-router.md |
| Server Components | nextjs-16/server-components.md |
| Caching | nextjs-16/caching.md, cache-components.md |
| proxy.ts | nextjs-16/proxy.md |
Prisma 7
| Feature | Reference |
|---------|-----------|
| Schema | prisma-7/schema.md |
| Client | prisma-7/client.md |
| Migrations | prisma-7/migrations.md |
| TypedSQL | prisma-7/typed-sql.md |
Better Auth
| Feature | Reference |
|---------|-----------|
| Setup | better-auth/installation.md |
| OAuth | better-auth/providers/ |
| Plugins | better-auth/plugins/ |
| Prisma adapter | better-auth/adapters/prisma.md |
Best Practices
- Server Components default - Add
'use client'only when needed - Colocate code - Keep related code in feature modules
- Type everything - Full TypeScript, no any
- Fetch where used - No prop drilling for data
- Validate at boundary - Zod schemas for all inputs
- Cache explicitly - Use
use cachedirective
Getting Started
- Review
nextjs-16for App Router fundamentals - Set up
prisma-7for database - Add
better-authfor authentication - Install
nextjs-shadcncomponents - Configure
nextjs-i18nif multilingual - Add
nextjs-zustandfor client state
Related Skills
fusengine/seo-entity
development
VerifiedTrustedCommunity
Use when optimizing entity-based / semantic SEO 2026. Covers entity maps, Google Knowledge Graph resolution, salience scoring, passage-level ranking, about/sameAs/knowsAbout schema, Cloud Natural Language API validation.
13SKILL.mdUpdated Jun 4, 2026
fusengine/seo
development
VerifiedTrustedCommunity
Use when running SEO, GEO, schema, Core Web Vitals, sitemap, hreflang, E-E-A-T, AI Overviews, technical SEO, or structured data tasks. Covers full-site audits, single-page analysis, schema markup, content quality, AI search optimization, local SEO, sitemap/robots, internal linking, semantic clustering, and search experience.
13SKILL.mdUpdated May 17, 2026
fusengine/seo-sxo
development
VerifiedTrustedCommunity
Use when optimizing search experience (SXO). Covers intent matching, user personas, user stories, page-type analysis, dwell time, scroll depth, pogo-sticking prevention.
13SKILL.mdUpdated May 17, 2026
fusengine/seo-local
development
VerifiedTrustedCommunity
Use when optimizing local SEO. Covers Google Business Profile, NAP consistency, citations, reviews acquisition, Local Pack ranking, location pages, LocalBusiness schema.
13SKILL.mdUpdated May 17, 2026