shadcn-agents-component-selector
Installation
SKILL.md
shadcn ui : Component Selector (Agent / Validator)
This skill is an AGENT skill. It does NOT teach a single component's API. It teaches a decision-tree validator : given a UI requirement in plain English or a draft implementation, classify the requirement, recommend the correct shadcn primitive, flag wrong picks, and forward-point to the syntax skill that covers the chosen primitive.
The 59 shadcn components cluster into 8 interaction families. ALWAYS classify the requirement into ONE family BEFORE picking a primitive. NEVER reason directly from "this looks like X" because surface similarity (Dialog and Drawer both overlay, Tooltip and Popover both float) hides the discriminating criterion (gesture vs button, hover vs click).
Quick Reference : The 8 Decision Families
| Family | Question to ask | Primitives | Tie-breaker |
|---|---|---|---|
| Modal-class | Where does the user focus go and what dismisses it ? | Dialog / Sheet / Drawer / AlertDialog | Viewport + gesture vs button + blocking-vs-not |
| Selector-class | How many options and does the user need to search ? | Native Select / Select / Combobox / Command | Option count + search need + multi-select |
| Menu-class | What triggers the menu open ? | DropdownMenu / ContextMenu / Menubar / NavigationMenu | Button click vs right-click vs app-bar vs site-nav |
| Floating-class | Does the floating content contain interactive elements ? | Tooltip / HoverCard / Popover | Hover-only vs hover-preview vs click-with-interaction |
| Notification-class | Must the user acknowledge before continuing ? | Sonner (toast) / Alert (inline) / AlertDialog | Non-blocking ephemeral vs persistent banner vs blocking confirm |
| Loading-class | Is the structure known or unknown ? | Skeleton / Spinner / Card-with-content | Known layout shape vs indeterminate vs already-data-shaped |
| Form-class | Which form library is in play ? | Form (RHF) / Field (library-agnostic) | react-hook-form-locked vs shared/agnostic |
| Table-class | Does the user need sort, filter, pagination, or column-visibility ? | Table / DataTable recipe | Static rows vs any-table-interaction |