Back to Agent Skills
Frontend & Design Featured
shadcn
by Julien Thibeaut (ui-skills.com) 3.7k GitHub stars
Add, search, fix, style, and compose shadcn/ui components and registries, with project context and usage examples.
#shadcn#components#registry#ui
Claude Code Codex
Overview
The shadcn skill manages shadcn/ui projects end to end — adding and searching components, fixing and styling them, composing UI including chat interfaces, and working with registries, presets, and components.json. It supplies project context and component docs so agents use shadcn patterns correctly.
What it is good for
- Adding and composing shadcn components
- Initializing a project with a preset
- Debugging a components.json setup
- Building a chat UI with shadcn
Install
Install in Claude Code
# Add the marketplace, then install the skill in Claude Code:
/plugin marketplace add ibelick/ui-skills
/plugin install shadcn
# Or install manually into ~/.claude/skills:
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/shadcn ~/.claude/skills/shadcnExplore AI Tools
Discover the best AI tools that complement your skills
Read AI & Design Articles
Tips and trends in the world of design and AI
Related Skills
Frontend & Design
Frontend Design
Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics — pages, components, artifacts, and posters.
Claude Code Codex
Frontend & Design Web Artifacts Builder
Construct complex, multi-component HTML artifacts for Claude.ai using React and Tailwind.
Claude Code Codex
Frontend & Design Animation Systems
Product-grade web motion like Stripe, Linear, Apple, and Vercel — easing/duration defaults, choreography, performance, and reduced-motion.
Claude Code Codex