skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author โ†’
WebsiteGitHub

shadcn-core-architecture

Explains shadcn ui's copy-not-install CLI distribution model and upgrade workflow.

Updated May 19, 2026
Search Tags:#components.json#shadcn architecture#copy-not-install#cli onboarding#local imports#upgrade workflow#anti-pattern debugging
One-click install
npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-core-architecture
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: shadcn-core-architecture
Source: https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package/tree/main/skills/source/shadcn-core/shadcn-core-architecture
Command: npx skills add https://github.com/Impertio-Studio/shadcn-ui-Claude-Skill-Package --skill shadcn-core-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents common onboarding failures by teaching the correct architectural model for shadcn uiโ€”avoiding mistaken assumptions about npm installation, import paths, and upgrade behavior.

Core Features & Use Cases

  • Copy-not-install ownership model: Clarifies that shadcn distributes component source into your repo via CLI, so you own and version the files.
  • Correct installation and import mental model: Guides teams away from non-existent shadcn-ui packages and toward local alias imports like @/components/ui/button.
  • Upgrade and overwrite safety: Establishes the diff-then-overwrite workflow to avoid losing local customizations and to manage evergreen-2026 changes.
  • Architecture decision support: Provides a decision-tree approach for when shadcn is appropriate versus traditional component libraries (MUI, Chakra, Mantine, Ant Design).
  • Grounding in official pillars: Reinforces the five documented pillars (Open Code, Composition, Distribution, Beautiful Defaults, AI-Ready) using their verbatim wording.

Quick Start

Ask Claude to onboard you to shadcn ui by explaining why there is no npm install shadcn-ui, how pnpm dlx shadcn@latest add <component> works, and what to do before using --overwrite after you customize a component.

Frequently Asked Questions about shadcn-core-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why is there no npm install shadcn-ui package to add to my project?โ–ผ

shadcn ui uses a copy-not-install distribution model, meaning the CLI copies component source code directly into your local repository rather than installing a package from npm. You own and version the files locally, modifying them as needed.

How do I resolve missing package or import path errors when using shadcn components?โ–ผ

Import path errors occur when assuming a node_modules package instead of local aliases. Resolve missing-package errors by using the shadcn CLI to add components and importing from local alias paths like @/components/ui/button in your project.

What is the safest workflow to upgrade shadcn components without losing customizations?โ–ผ

Use a diff-first overwrite discipline to safely upgrade shadcn components. Before running the CLI with the --overwrite flag, compare the new component source against your local customizations to ensure you do not lose manual modifications during the upgrade.

How does shadcn ui compare to traditional component libraries like MUI or Ant Design?โ–ผ

shadcn ui gives you full local source code ownership via CLI copying, whereas traditional libraries like MUI install compiled packages via npm. Choose shadcn for direct code control, or traditional libraries for dependency-managed updates.

When should I not use the shadcn copy-not-install architecture for my project?โ–ผ

Avoid the shadcn architecture if your team requires centralized version control through npm dependencies rather than managing local source files. Traditional component libraries are better suited for projects wanting automatic updates without local code ownership.

Related Skills

Explore More Software Engineering Skillsโ†’
gwenwindflowergwenwindflower
9

shadcn-ui

Automate adding and configuring shadcn/ui components in frontend projects.

Community
Intermediate
erguotou520erguotou520

update-nanoclaw

Synchronize a NanoClaw fork with upstream changes while preserving local modifications.

Community
Advanced
cassioalexandrecassioalexandre
2

stitch-shadcn-ui

Integrate shadcn/ui components into React projects with configuration validation.

Community
Advanced
vincent-kkvincent-kk
1

ui-plugin-guidelines

Identify UI library compatibility with the canard/schema-form plugin.

Community
Basic