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

  1. Load the shadcn skill with the Skill tool, from the directory holding components.json (in a monorepo, the ui package). It injects the project context, owns the CLI and the styling rules, and its base field (base or radix) decides the polymorphism law below.
  2. Read the argument. A component to build → build mode; a file path → review mode, every law below graded against the file.
  3. ls the 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.

Installs
4
GitHub Stars
2
First Seen
Sep 8, 2026