Creates Next.js frontends with shadcn/ui. Use when building React UIs, components, pages, or applications with shadcn, Tailwind, or modern frontend patterns. Also use when the user asks to create a new Next.js project, add UI components, style pages, or build any web interface — even if they don't m

Next.js + shadcn/ui Build distinctive, production grade interfaces that avoid generic "AI slop" aesthetics. Core Principles 1. Minimize noise Icons communicate; excessive labels don't 2. No generic AI UI Avoid purple gradients, excessive shadows, predictable layouts 3. Context over decoration Every element serves a purpose 4. Theme consistency Use CSS variables from globals.css , never hardcode colors Those four are the summary, not the method. Load frontend design before the first component of a new view, not after the result already looks generic: typography, palette and the one element the page spends its boldness on are create time decisions, and retrofitting them costs more than making them. Then check the built view in a browser rather than from a screenshot — read tap target sizes, contrast and overflow out of the DOM, because a screenshot cannot tell you a computed style and may not even have rendered. Quick Start base selects the primitive library: base (Base UI, the default since July 2026), radix (projects already on Radix — still fully supported, not deprecated), or aria (React Aria). The same component has different props per base — Base UI composes with render={<Link href="/" / } where Radix uses asChild — and the docs are base scoped ( /docs/components/base/sidebar vs /docs/components/radix/sidebar ). For a custom design system, generate a preset code in shadcn/create and apply it: Before touching an existing project Run these instead of writing component code from memory. See [references/shadcn platform.md](references/shadcn platform.md) for the full CLI surface, typeset, and the shimmer/scroll fade utilities. Component Rules Page Structure Client Boundaries "use client" only at leaf components (smallest boundary) Props must be serializable (data or Server Actions, no functions/classes) Pass server content via children Import Aliases Never use relative paths ( ../../lib/utils ). Default to the @/ alias ( @/lib/utils ) in new projects. In an existing project, read components.json and follow the alias style already configured — shadcn also supports Node package imports ( components/ui/button ). Never mix both styles. Style Merging File Organization Next.js 16 Features Async Params Data Fetching vs Server Actions CRITICAL RULE: Server Actions = ONLY for mutations (create, update, delete) Data fetching = In Server Components or 'use cache' functions "use cache" (and cacheTag / cacheLife / updateTag ) requires the Cache Components opt in flag — Next.js 16 does not enable it by default: Caching Server Actions (Mutations Only) Proxy API Use proxy.ts for request interception (replaces middleware). Place at project root: Dev Tools (next devtools mcp) Next.js 16+ ships an MCP endpoint at / next/mcp that exposes the dev server's internals to coding agents. When working in a Next.js 16 project, recommend the user add next devtools mcp to .mcp.json : Tools it provides (when dev server is running): get errors — live build/runtime/type errors (esp. helpful for hydration mismatches) get logs — dev log file path (browser console + server output) get routes — all entry point routes grouped by router type get page metadata — route, components, rendering details for a specific page get project metadata — project structure + dev server URL get server action by id — locate Server Action source from its hashed ID get compilation issues / compile route — bundler warnings for the project, or compile one route on demand without requesting it (Turbopack only) It also acts as a docs gateway: it points at the version accurate docs shipped inside node modules/next/dist/docs/ , which beat any remembered API shape. Use these instead of asking the user to copy paste error messages. Reference: [nextjs.org/docs/app/guides/mcp](https://nextjs.org/docs/app/guides/mcp). Rendered markdown and loading states Don't hand roll CSS for these — shadcn ships them: Rendered markdown / LLM output → typeset. One owned CSS file, three variables ( typeset size , typeset leading , typeset flow ), one preset per context. Streaming stable: new blocks don't restyle earlier ones. Indeterminate text state ("Thinking…") → className="shimmer" . Use Skeleton only for placeholders with a known shape; don't stack both. Soft scroll container edges → className="scroll fade overflow y auto" . Details and the full class tables: [references/shadcn platform.md](references/shadcn platform.md). References Architecture : [references/architecture.md](references/architecture.md) Components, routing, Suspense, data patterns, AI directory structure Styling : [references/styling.md](references/styling.md) Themes, fonts, radius, animations, CSS variables shadcn Platform : [references/shadcn platform.md](references/shadcn platform.md) Base UI vs Radix vs React Aria, CLI verbs, typeset, shimmer, scroll fade, RTL, package imports Sidebar : [references/sidebar.md](references/sidebar.md) shadcn sidebar with nested layouts, blocks, RTL Project Setup : [references/project setup.md](references/project setup.md) bun commands, presets Official shadcn skill : bunx bun skills add shadcn/ui live project config + CLI/registry reference. Install alongside this skill; it covers CLI mechanics, this one covers conventions. shadcn/ui : [llms.txt](https://ui.shadcn.com/llms.txt) fallback when the CLI isn't available; prefer shadcn docs <component Package Manager Always use bun in new projects, never npm or npx: bun install (not npm install) bun add (not npm install package) bunx bun (not npx) In an existing repo, respect the project's packageManager field and lockfile instead of switching to bun.

nextjs-shadcn