shadcn/ui

This skill keeps shadcn/ui work project-aware. Components are source files in the app, so always inspect the local project before adding, importing, or rewriting them.

First Steps

1. Work from the app root that owns components.json.
2. Run pnpm dlx shadcn@latest info --json when you need current project context: framework, Tailwind version, aliases, icon library, installed components, and resolved paths.
3. Use the actual aliases from components.json or shadcn info; do not assume @/components/ui if the project says otherwise.
4. Check app/components/ui/ or the resolved ui path before importing a component.
5. For unfamiliar components, run pnpm dlx shadcn@latest docs <component> and read the returned docs or examples before coding.

Adding Or Updating Components

• Add missing primitives with pnpm dlx shadcn@latest add <component> from the app root.
• Before overwriting an existing component, use pnpm dlx shadcn@latest add <component> --dry-run and --diff to inspect the change.
• After adding registry code, read the generated files. Fix import aliases, icon imports, missing subcomponents, and composition issues before using the component.
• Do not fetch raw component files manually from GitHub when the shadcn CLI can resolve the registry item.
• If a user asks to add a third-party block but does not name a registry, ask which registry to use instead of guessing.