shadcn-core-architecture

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.