shadcn-composition-patterns
Installation
SKILL.md
Build a component the way shadcn builds its own — a compound: one file, one prefixed family of parts, each part a single element the consumer styles and replaces from the call site. The same laws grade an existing component in review.
The React theory (why compounds, why no boolean props, lifting state into a provider) is the vercel-composition-patterns skill; this skill is the shadcn layer on top of it.
Setup
- Load the
shadcnskill with the Skill tool, from the directory holdingcomponents.json(in a monorepo, the ui package). It injects the project context, owns the CLI and the styling rules, and itsbasefield (baseorradix) decides the polymorphism law below. - Read the argument. A component to build → build mode; a file path → review mode, every law below graded against the file.
lsthe components directory before writing anything: the need may already be a primitive or an existing compound. In build mode a match ends the task with a pointer to it.
Placement
- Used in ONE consumer → declared in that consumer's file. No new file.
- Shared → the project's existing component convention (a design-system folder beside
ui/, a feature folder). Without one,components/ui/beside the shadcn primitives.
Laws
Every law is checkable on the file alone.