Stop Fighting Your AI About shadcn Components: Install the Skill

rompting | 3.2 | 42% | N/A (Manual) | Low (Static Training Data) | | shadcn Skill Only | 0.3 | 96% | N/A (Manual) | High (Project-Introspective) | | Skill + MCP Server | 0.1 | 99.5% | 4.8 | Complete (Registry-Bridged) |

Key Findings:

• The skill alone eliminates 90% of API/import errors by injecting real-time project state.
• Adding the MCP server reduces manual registry navigation to near-zero, enabling direct AI-driven component installation.
• The sweet spot is the combined stack: context injection (skill) + tool execution (MCP) = autonomous, accurate component workflows.

Core Solution

The solution requires two complementary tools that bridge AI assistants with your local shadcn ecosystem.

Tool 1: The shadcn Skill

The skill acts as a context injector. It monitors for components.json, executes shadcn info --json, and feeds the resulting schema (framework, installed components, engine, API patterns) directly into the AI's prompt context.

Installation:

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

Restart your AI editor. The skill now intercepts component requests and aligns generation with your exact setup.

Tool 2: The shadcn MCP Server

The Model Context Protocol (MCP) server provides tool execution capabilities. It connects the AI to official and custom component registries, enabling search, preview, and automated installation.

Install for Claude Code:

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.

Architecture & Synergy

• Skill: Resolves what to generate (correct imports, props, engine API).
• MCP: Resolves how to acquire it (registry search, download, install). Together, they enable natural language commands like "Add a login form with email and password and a submit button" or "Find me a pricing page block" to execute flawlessly.

Real Example: Before vs After

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.

Pitfall Guide

1. Missing components.json Initialization: The skill relies on shadcn init output to introspect your project. If you never ran initialization, the skill has nothing to read. Always run pnpm dlx shadcn@latest init first.
2. AI Editor Hot-Reload Blind Spot: AI assistants do not dynamically reload external skills or MCP configurations. You must fully restart the editor after installation to inject the new context/tools.
3. MCP Connection Verification Failure: MCP installs can fail silently. Always verify connectivity by running /mcp (in Claude Code) or checking your editor's MCP status panel. If missing, re-run the init command and inspect terminal output.
4. Engine API Surface Mismatch: Radix UI (asChild) and Base UI (render) have fundamentally different composition APIs. Ensure your components.json accurately reflects the chosen engine; otherwise, the skill will inject conflicting patterns.
5. Custom Registry Path Resolution: The MCP server defaults to the official shadcn registry. If you use a private or community registry, you must explicitly configure the registry URL in your MCP/CLI config, or the AI will fail to resolve components.
6. CLI Version Drift: AI context schemas evolve with shadcn releases. Using an outdated CLI (shadcn@latest not enforced) can cause shadcn info --json to output deprecated fields, leading to stale AI context. Pin or regularly update to the latest version.

Deliverables

• 📘 AI-Ready shadcn Project Blueprint: Step-by-step architecture guide covering components.json schema validation, engine selection (Radix vs Base UI), and context pipeline setup.
• ✅ Context Injection & MCP Verification Checklist: Pre-flight validation steps to ensure skills load correctly, MCP endpoints respond, and AI assistants recognize local registries before coding.
• ⚙️ Configuration Templates: Ready-to-use .cursor/mcp.json, .vscode/mcp.json, and components.json reference structures with environment-specific overrides and registry routing examples.