shadcn Library

Local raw snapshot of the shadcn/ui registry at ~/.agents/component-library/shadcn/ (see its INDEX.md for the component list and dependencies). If the snapshot does not exist on this machine yet, create it with the snapshot refresh procedure at the end of this skill, or fetch the same JSON from the registry URLs directly for a one-off component.

Why: when shadcn/ui is the project's chosen system, copying verified raw source is faster and more reliable than regenerating it from memory, and works offline. Do not introduce shadcn into a project with another established system merely because this skill exists.

Non-negotiable: the snapshot is raw upstream source. It carries no design decisions. Every project has its own design system — restyle at copy time; never carry over upstream visual styling (colors, radii, shadows, typography) into a project that defines its own.

Procedure

1. Check the project first. Search its existing components and reuse them before copying. For missing shadcn primitives, use the local snapshot as stated in this skill's description; do not switch to the registry CLI by default. Inspect the project's framework, React/Tailwind versions and primitive dependencies for snapshot compatibility.
2. Pick from the snapshot. Read ~/.agents/component-library/shadcn/INDEX.md; find the component and its deps (dependencies = npm packages, registryDependencies = other components in the same lib — copy those too).
3. Copy the source into the project's component dir (typically components/ui/<name>.tsx). Do not rename internals (data-slot attributes stay).
4. Adapt imports to the project's convention:
   • from "cn" → the project's cn util (usually @/lib/utils)
   • from "radix-ui" → either install the unified radix-ui package, or split into @radix-ui/react-<primitive> per the project's existing imports
   • lucide-react icons: swap to the project's icon family if it uses a different one
5. Resolve missing deps against the project's package manager, existing versions and lockfile. Verify compatibility before adding only the dependencies required by the chosen component; do not migrate the project's Radix package layout incidentally.
6. Restyle to the project's design system — map className values onto the project's tokens/CSS variables. Match existing components in the project (radius scale, color tokens, spacing).
7. Verify: run the applicable project typecheck/lint through code-quality, confirm imports resolve, and inspect rendered keyboard/focus and interaction states via design-validation when a preview is available. Report unverified rendering explicitly.

Update the snapshot

When the user asks to refresh the library: refetch https://ui.shadcn.com/r/index.json, then per component https://ui.shadcn.com/r/styles/new-york-v4/<name>.json, write each files[].content, regenerate MANIFEST.json and INDEX.md. Skip entries that 404 (dead upstream).

Validation

• The component was reused locally or copied from the inspected snapshot; imports/dependencies match the target project and existing user code was preserved.
• Applicable installed checks ran, rendered interaction checks are recorded or explicitly unverified, and no registry fetch was substituted for the local source without an explicit refresh request.