How do I install the Shadcn UI skill?

Run npx skillmds@latest add podo/shadcn-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Shadcn UI skill do?

Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns. Understands the local component registry and avoids common shadcn anti-patterns during implementation. It is listed under Web & Frontend on SkillMD.

Is Shadcn UI safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Shadcn UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Shadcn UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Shadcn UI?

podo (@podo) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Shadcn UI by podo — Agent Skill

Name: Shadcn UI
Rating: 4.5 (4 reviews)
Author: podo

File contents

shadcn-ui

Catalogue stub — full skill: shadcn-ui/ui

Decision tree

Run this before any shadcn/ui component work:

Is the full skill already installed? Check: ~/.design-agent-skills/skills/shadcn-ui/SKILL.md exists AND does NOT contain a das: block.
- Yes → invoke shadcn-ui and proceed
- No → go to step 2
Do you have shell access?
- Yes → run the install command below, then invoke the skill
- No → show the install command; in Claude Code, send it as a chat message starting with ! — add -g for global install or omit for project-only

Install command

npx skills add shadcn-ui/skills

Or per-agent:

Claude Code: claude skills add shadcn-ui/skills
Cursor/OpenCode: npx skills add shadcn-ui/skills

Invoke after install

Skill name: shadcn-ui
Trigger phrases: "shadcn", "shadcn/ui", "shadcn component", "ui component"

What it does

Provides a project-aware workflow for working with shadcn/ui — searching the available component registry, adding components with the correct CLI command, composing components correctly, and fixing common implementation mistakes. Ensures component usage follows shadcn/ui patterns and integrates cleanly with the existing project setup.

Frequently asked questions

Shadcn UI