Stop Fighting Your AI About shadcn Components: Install the Skill

If you use Cursor, Claude Code, GitHub Copilot, or any AI coding assistant with shadcn/ui, you probably hit this wall:

You ask the AI to add a Combobox using Base UI. It generates code with asChild. But Base UI does not have asChild, it uses render. You correct it. Next prompt, same mistake. You correct again. The cycle never ends.

Or you ask for "a login form with shadcn". The AI invents components that don't exist in your registry, or it imports from @radix-ui/react-dialog when your project uses Base UI.

The reason is simple: the AI does not know your project. It has no idea which framework you use, which components you already installed, which engine (Radix or Base UI) you picked, or how shadcn's APIs evolved this year. It guesses based on training data that might be a year old.

There are two tools that fix this. Let me walk you through both.

Tool 1: The shadcn skill

A skill is a small bundle of instructions and helpers that gets injected into your AI assistant's context whenever you work in a project. The shadcn skill specifically tells your AI:

• which framework you use (Next.js, Vite, Remix, Astro, etc.)
• which components are already installed in your project
• which engine you chose (Radix or Base UI)
• the correct, current API patterns

Behind the scenes, the skill activates when it sees a components.json file in your project, runs shadcn info --json, and feeds the result to your assistant. So instead of guessing, the AI reads your actual setup.

How to install the skill

In your project root, run:

pnpm dlx skills add shadcn/ui

Or if you use npm, yarn, or bun:

npm dlx skills add shadcn/ui
yarn dlx skills add shadcn/ui
bun dlx skills add shadcn/ui

That is it. Restart your AI editor, and now when you ask it for a component, it knows your context.

What changes after you install it

Before the skill, you would write:

"Add a button using shadcn"

And get something close, but maybe wrong import, maybe outdated API, maybe a component you didn't install yet.

After the skill, you can write things like:

"Add a login form with email and password and a submit button"

"Build a dashboard page with a sidebar, three stat cards, and a data table"

"Create a settings page where the user can update their profile"

And the AI generates code that uses exactly the components in your project, with the correct API for the engine you picked.

This is what fixes the asChild vs render problem mentioned earlier. The skill tells the AI "this project uses Base UI, use render", and the AI listens.

Tool 2: The shadcn MCP server

The skill is great for context, but it does not add new components for you. That is what the MCP server does.

MCP stands for Model Context Protocol. It is a standard that lets AI assistants talk to external tools and services. The shadcn MCP server gives your AI a direct connection to component registries (the official shadcn registry, plus any custom ones you add).

With it installed, the AI can:

• search across thousands of blocks and components
• preview a component before installing
• actually run the install command for you

Install for Claude Code

In your project root:

pnpm dlx shadcn@latest mcp init --client claude

After it finishes, restart Claude Code and run /mcp to confirm the shadcn server shows up.

Install for Cursor

Add the shadcn server to .cursor/mcp.json in your project. Check the shadcn MCP docs for the exact JSON since the format updates.

Install for VS Code with GitHub Copilot

Add the shadcn server to .vscode/mcp.json in your project.

What changes after you install it

You can ask:

"Show me all available components in the shadcn registry"

"Add the button, dialog, and card components to my project"

"Find me a pricing page block"

And it just works. No more "what is the install command for X again", no more searching the docs in another tab.

Skill or MCP, which one do I need?

Honestly, install both. They solve different problems:

	Skill	MCP server
Knows your project setup	yes	partial
Generates correct API code	yes	yes (via registry)
Can install new components for you	no	yes
Searches registries	no	yes

The skill is "give my AI context about my project". The MCP server is "give my AI hands to actually do registry stuff". Together they make your AI feel like it actually works on your team.

A real example

Here is the difference in practice. Junior dev has a Base UI shadcn project, and asks the AI:

Without skill or MCP:

import { Dialog } from '@radix-ui/react-dialog';

<Dialog.Trigger asChild>
  <Button>Open</Button>
</Dialog.Trigger>

Wrong import (project uses Base UI, not Radix), and asChild does not exist in Base UI. The dev now spends 10 minutes fixing it.

With skill installed:

import { Dialog } from '@/components/ui/dialog';

<Dialog.Trigger render={<Button>Open</Button>}>
  Open
</Dialog.Trigger>

Correct import path, correct API. Zero fighting.

Quick troubleshooting

A few things that bit me when I tried this:

• The skill needs components.json in your project. If you never ran shadcn init, the skill has nothing to read. Run pnpm dlx shadcn@latest init first.
• Restart your AI editor after install. Hot reload does not pick up new skills or MCP servers.
• Check /mcp in Claude Code to confirm the server is connected. If it is not, the install probably failed silently. Run it again and watch the output.

Final thought

The first time AI auto installs the right shadcn component, with the right API, on the right engine, it feels like cheating. It is not cheating, it is just giving the AI the same context a human team member would have.

If you are on shadcn/ui in 2026 and your AI is still generating wrong code, you are working with one hand tied behind your back. Spend 5 minutes installing the skill. Future you will thank you.