Nextjs Shadcn

This is a comprehensive Next.js 15/16 skill built around shadcn/ui conventions and modern React patterns. It enforces client boundary hygiene, proper server action usage (mutations only, not data fetching), and the new async params API. The opinionated file organization puts route-specific code in route groups and global utilities at the root. Notably pushes back against generic AI aesthetics with rules like "no purple gradients" and icon-first UI. Includes integration with next-devtools-mcp for live error inspection instead of copy-pasting stack traces. Uses bun exclusively and always imports with @ aliases. Best for greenfield Next.js projects where you want disciplined architecture from the start.

skills.sh installs: 845
GitHub stars: 72
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add laguagu/claude-code-nextjs-skills --skill nextjs-shadcn --agent claude-code

Installs into .claude/skills of the current project.

Files

Next.js + shadcn/ui

Build an interface with a visual identity that fits its content, audience and task. These are design defaults, not a fixed page recipe; the user's direction and an established design system take precedence.

Choose the visual direction

For a new view or substantial redesign, use frontend-design to choose the typography, palette and composition before building. Preserve a working visual system during smaller edits.

Choose fonts for the product's tone, reading density and language support. Use shadcn/create to choose the component style, body and heading fonts, icon family and theme together. Compare the preview with representative content, then make deliberate choices about type scale, spacing and hierarchy. Neither the default preset nor an unusual font guarantees a good design.

Record the chosen preset, theme, fonts and icon family in the project's design notes; preserve that direction unless the brief changes. References and images are project-specific. Component style and icon family are separate choices; styling.md covers them.

Keep the user's task clear:

SKILL.md on GitHub