shadcn/ui
2 skills275k installs241k starsGitHub
Install
npx skills add https://github.com/shadcn/uiSkills in this repo
1ShadcnThe shadcn skill is an agent workflow for managing shadcn/ui components and design-system projects in React apps. It injects live project context from `npx shadcn@latest info --json`, then guides component selection, installation, styling, debugging, and preset changes through the official CLI rather than manual file copies. Developers reach for it when a repo has or needs a `components.json`, when adding blocks from community registries, or when fixing composition mistakes like missing DialogTitle or incorrect FieldGroup layout. The skill enforces documented Critical Rules across styling, forms, composition, and icons, including semantic Tailwind tokens, gap-based spacing, Field validation states, and registry-aware import aliases. Its CLI workflow covers search, docs fetching, init and apply presets, add with dry-run diff, and smart merges that preserve local customizations. It also handles monorepo paths, RSC client directives, radix versus base primitive APIs, and third-party registry import rewrites after add.263kinstalls2Migrate Radix To Basemigrate-radix-to-base moves shadcn wrappers and Radix compositions to @base-ui/react with precise mappings and per-component migration reports. Preflight requires shadcn info JSON, correct package manager installs, a clean git branch, and a baseline typecheck before dependency changes. Strategy prefers golden-pair fetches from ui.shadcn.com registry URLs, three-way git merge-file for customized wrappers, and mandatory grep sweeps for leftover radix imports even after clean merges. Progressive mode writes component-base.tsx files, repoints consumers one at a time, and flips components.json only after the last radix wrapper is gone. Whole-project mode migrates dependency order from leaf components like button and label, sweeps app code against consumer-props.md, then removes radix packages. Hard rules skip cmdk, vaul, sonner, calendar, and chart libraries, flag behavior deltas like tabs activation and menu close-on-click, and migrate button.tsx to real @base-ui/react/button. Reports land in .migration/component.md files with changed, left alone, behavior changes, and verify-by-hand sections. Legacy new-york styles use transformation engine only without style retargeting that would r.11.9kinstalls