shadcnlisted

Operate the shadcn/ui CLI and registry system (ui.shadcn.com) — initializing on an existing project, components.json anatomy, CSS-variable theming and remapping shadcn's --background/--foreground tokens onto an existing palette (like this repo's dark ink surfaces), third-party @namespace registries, and the upgrade/diff workflow. Use this whenever a task involves running npx shadcn init or add, editing components.json, theming or re-theming shadcn components, wiring shadcn into an existing Tailwind project, adding a component from a third-party or private registry (@acme/thing syntax), diffing local components against upstream, deciding which shadcn components belong on a marketing/launch page versus an app, or any question about the shadcn CLI, registry, or token system. Also use it BEFORE running any shadcn command on a Tailwind v3 project — the current CLI targets Tailwind v4, and the shadcn@2.3.0 vs shadcn@latest fork is the first decision, documented here.
shashidharbabu/claude-design-skills · ★ 0 · Web & Frontend · score 60

Install: claude install-skill shashidharbabu/claude-design-skills

# shadcn/ui shadcn/ui is **not a component library you install as a dependency**. It is a CLI plus a registry of open component source. `npx shadcn add button` copies `button.tsx` into your repo; from that moment the code is yours to edit, and no `npm update` will ever touch it. The system has three parts: the **CLI** (init/add/search/build), **components.json** (per-project config the CLI reads), and **registries** (the default `@shadcn` one plus any third-party or private registry you configure). This skill owns the CLI/registry/theming mechanics. For *whether* shadcn is the right stack for an app, defer to **rocketride-frontend** (shadcn is its shared baseline); for design rules and palettes, **ui-ux-pro-max**; for not looking like a stock shadcn site, **frontend-design** / **taste-skill**; for animation layered on top, **motion-primitives**. ## The version fork — decide this first Verified against npm and live docs, Aug 2026: | Your project | CLI to use | Docs | |---|---|---| | Tailwind **v4** / new project | `npx shadcn@latest` (4.18.0) | ui.shadcn.com/docs | | Tailwind **v3.x** (this repo: 3.4) | `npx shadcn@2.3.0` — last v3-compatible CLI | v3.shadcn.com (legacy) | `shadcn@latest` is Tailwind v4 + React 19 territory: it writes `@import "shadcn/tailwind.css"` into your global CSS, uses `@theme inline` and oklch tokens, and offers a `--base` choice (`base`, `radix`, `aria`) and presets. **Do not run `@latest init` on a Tailwind 3.4 project** — it will scaffold v4-s