What problem does it solve? AI agents often generate Next.js code that mixes outdated Pages Router patterns, misuses client components, or ignores caching and data-fetching best practices. This Skill encodes expert conventions for Next.js App Router, TypeScript, React Server Components, Shadcn UI, Radix UI, and Tailwind so generated code follows current standards. ## Core Features & Use Cases - App Router Architecture: Enforces correct route structure with page.tsx, layout.tsx, loading.tsx, error.tsx, route handlers, route groups, and colocated private components. - Server/Client Component Discipline: Defaults to React Server Components, restricts 'use client' to interactive leaf components, and forbids importing server components into client files. - Data Fetching & Mutations: Prescribes explicit fetch cache strategies, revalidateTag/revalidatePath, Server Actions with zod validation, and URL state via nuqs. - Use Case: Ask the agent to build a dashboard page with filters and pagination; it will produce a server component that fetches data with explicit caching, shareable URL search params, Suspense streaming, and Shadcn UI styled with Tailwind tokens. ## Quick Start Use the dev-nextjs skill to scaffold a Next.js App Router page with server-side data fetching, a Server Action form, and Shadcn UI components.
