Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

shadcn/ui Component Expert

Enforces the correct shadcn CLI workflow and code conventions when adding, fixing, or styling shadcn/ui components.

Design & UIIntermediate★ 183⑂ 13AI score 9/10Last updated: Oct 9, 2026

What it does

  • Drives all component work through the shadcn CLI (info, search, docs, add, view, init --preset) using the project's own package runner.
  • Injects and uses project context (aliases, isRSC, tailwindVersion, base, iconLibrary, resolvedPaths) so imports, "use client" directives, and icon libraries are correct.
  • Enforces concrete do/don't rules: no space-x-*/space-y-* (use flex gap-*), size-10 over w-10 h-10, forms via FieldGroup + Field, button icons via data-icon, semantic color tokens only, no manual z-index on overlays.
  • Provides safe update and preset-switch workflows using --dry-run, --diff, and explicit user confirmation before --overwrite.

Who it's for

  • Frontend developers using shadcn/ui on Next.js, Vite, React Router, Astro, or Laravel.
  • Teams tired of AI-generated UI that ignores shadcn composition and Tailwind conventions.
  • Anyone pulling blocks from community registries and fixing mismatched import aliases.

Example uses

  1. "Build a settings page" → composes Tabs + Card + FieldGroup, checks installed components before running add.
  2. "Update my Button component from upstream" → add button --dry-run, then per-file --diff merge that preserves local edits.
  3. "Switch to --preset a2r6bw" → asks reinstall vs merge vs skip, then runs the matching init command inside the project.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/molefrog/moi/HEAD/.agents/skills/shadcn/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the .agents/skills/shadcn folder from the GitHub repo molefrog/moi into my ~/.claude/skills/shadcn/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/molefrog/moi.git /tmp/moi && mkdir -p ~/.claude/skills && cp -r /tmp/moi/.agents/skills/shadcn ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/molefrog/moi.git /tmp/moi
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r /tmp/moi/.agents/skills/shadcn ~/.claude/skills/
  5. Verify ~/.claude/skills/shadcn contains SKILL.md plus rules/, cli.md, and customization.md.
  6. Run Claude Code inside a project that has components.json and ask something like "add a dialog component" to trigger the skill.
  7. Make sure Node.js and npx (or pnpm/bun) are installed so the CLI commands work.
View source on GitHub ↗License: NOASSERTION