Agent skill · software engineering · laguagu
nextjs-shadcn
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.
Why this skill is useful
Provides specific commands and patterns for building Next.js applications with shadcn/ui that the AI wouldn't reliably generate on its own.
What it needs
Requires bun installed locally. About 5k tokens when loaded. Last updated 2026-08-03. 58 stars on the source repository.
What this skill does
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 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills laguagu/nextjs-shadcn