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 mention shadcn explicitly.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
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 mention shadcn explicitly.
Next.js + shadcn/ui
Build distinctive, production-grade interfaces that avoid generic "AI slop" aesthetics.
Context over decoration - Every element serves a purpose
Theme consistency - Use CSS variables from globals.css, never hardcode colors
Quick Start
bunx --bun shadcn@latest init --template next --base base
--base selects the primitive library: base (Base UI, the default), radix
(legacy projects), or aria (React Aria). The same component has different
props per base, 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:
bunx --bun shadcn@latest init --preset <CODE> --template next
Before touching an existing project
bunx --bun shadcn@latest info --json # base, framework, aliases, installed components
bunx --bun shadcn@latest docs <component> # API reference resolved to THIS project's base
Run these instead of writing component code from memory. See
references/shadcn-platform.md for the full CLI
surface, typeset, and the shimmer/scroll-fade utilities.
"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.
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:
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 - 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.
