Skip to content
MeloSkill

Components

shadcn skill for Claude, Cursor, Codex, and Grok Bot

shadcn/ui skill for Claude Code and Cursor: compare the official CLI playbook with the kit-choice file and the composition follow-up before you install. Default to shadcn when the repo is already on the kit; use pick-ui-library when no kit is chosen yet. Install steps: how to install. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

Last reviewed 2026-10-24 · Methodology · How to choose · How to install

How an agent uses this

If the repo is already on shadcn, install shadcn and ask the agent to use the CLI. If no kit is chosen yet, start with pick-ui-library instead of assuming shadcn. Agent folders: install guide.

Default file: shadcn. Read the SKILL.md on that page before you install.

Install

npx skills add https://github.com/shadcn-ui/ui/tree/HEAD/skills/shadcn

Try asking

Using the shadcn skill, add the components this screen needs through the CLI, respect components.json, and stop inventing one-off buttons.
Skill When to use it Platform Updated Safety
shadcn
shadcn-ui/ui
Default for Claude Code or Cursor when the repo is on shadcn and the agent should run the CLI, respect components.json, and stop inventing one-off buttons. Any agent 2026-10-14 pass
Pick UI Library
emilkowalski/skills
When the repo has no component kit yet and the agent needs a choice, not a default to shadcn. Any agent 2026-09-15 pass
Composition Patterns
vercel-labs/agent-skills
When shadcn primitives are in the tree but the agent is still building unnecessary wrappers. Any agent 2026-01-28 pass

Safety is a text search on the file, not an audit. Pass / Review / Risk are explained in the evaluation guide.

  1. 01

    shadcn

    The default for this task. The agent adds and composes shadcn primitives through the CLI and respects components.json. Open the file for CLI and composition rules, not a blank-page taste brief. If the repo has no kit yet, start with pick-ui-library instead of assuming shadcn.

    npx skills add https://github.com/shadcn-ui/ui/tree/HEAD/skills/shadcn

  2. 02

    Pick UI Library

    A decision file, not an implementation file. Use it when the project has not chosen a component kit and you need an explicit pick. It should stop a silent default to shadcn. Swap to the official shadcn skill after the kit is chosen.

    npx skills add https://github.com/emilkowalski/skills/tree/HEAD/skills/pick-ui-library

  3. 03

    Composition Patterns

    For repos already on shadcn where the agent still wraps every primitive. It is the composition follow-up after the kit is installed, not a second way to add the library. Do not use it as the first install when the project still has no kit.

    npx skills add https://github.com/vercel-labs/agent-skills/tree/HEAD/skills/composition-patterns

FAQ

Which shadcn skill should I install first for Cursor or Claude Code?

If the project already has shadcn, install shadcn — the official CLI and composition playbook. If no kit is chosen yet, install pick-ui-library first so the agent does not silently default to shadcn. Use composition-patterns only after primitives are in the tree and the agent keeps wrapping them. Paths and flags: how to install.

How is the official skill different from pick-ui-library and composition-patterns?

shadcn teaches the agent to run the CLI, respect components.json, and compose primitives. pick-ui-library is a decision file for choosing a kit — not an implementation file. composition-patterns is the follow-up when wrappers pile up on top of an existing kit. Install one role at a time.

The agent invents one-off buttons or wraps every primitive — which file?

One-off controls on a shadcn repo → shadcn and ask it to add via the CLI. Unnecessary wrapper layers after the kit is in → composition-patterns. Still choosing a kit → pick-ui-library, not another taste file.

Is the official skill enough?

For adding and composing shadcn components, yes. pick-ui-library if the project has not chosen a kit yet. composition-patterns if the agent is wrapping every primitive in a new abstraction.

Does this install MCP?

The official skill may mention the shadcn MCP. This directory lists the SKILL.md. You still decide whether to enable MCP in the agent.

What if my project is not on shadcn?

Do not install this task’s official skill. Use the UI/UX or frontend-design tasks instead.

Can I use this with Grok Bot?

Yes. Paste the SKILL.md into Grok Bot or attach the file, then ask for the same job this page describes. MeloSkill is not affiliated with xAI. Grok Bot instructions: Grok Bot playbooks.

Related tasks