shadcn-agents-component-selector

To choose the right shadcn UI component, you validate the requirement against an 8-family decision tree covering modals, selectors, menus, floating elements, notifications, loading, forms, and tables. This classifies the interaction model to recommend the correct primitive.

You should use a Combobox instead of a Select in shadcn when dealing with searchable lists. Select components fail for searchable lists because they lack built-in filtering, making Combobox the correct primitive for searchable, dynamic list interactions.

The best way to validate shadcn UI choices in an AI draft is by applying anti-pattern detection rules. This detects canonical failure modes like using a Tooltip for interactive content and provides wrong-then-right guidance explaining why the incorrect pick fails.

Using a shadcn Tooltip for interactive content fails because tooltips lack the necessary accessibility primitives and gesture handling for user interaction. The decision tree flags this anti-pattern and recommends a Popover or HoverCard based on specific trigger constraints.

To refactor a shadcn Dialog to a Drawer for mobile interfaces, you evaluate the interaction model's blocking behavior and gesture constraints. The decision tree identifies Dialog as a canonical failure mode for mobile bottom-sheets and recommends the Drawer primitive.

Yes, shadcn component selection provides implementation syntax by forwarding to a matching shadcn syntax skill. After emitting the recommended primitive and discriminating rationale, it points to the authoritative implementation skill for correct coding.