build-primitive

Start with the ARIA contract: pick the correct role and state attributes, then implement keyboard navigation, then controlled/uncontrolled state via a useControllableState hook, then styling hooks with data-slot attributes. The skill provides templates for presentational, interactive, form-control, and composite components.

Build from scratch only when no Base UI primitive covers the component, such as Breadcrumb, Avatar, Badge, Rating, Pagination, or Tag Input. If a primitive partially exists, compose from it; if a headless library like react-aria or cmdk handles the state machine, wrap it instead.

Use react-aria for date pickers, @tanstack/react-table for data tables, cmdk for command palettes, embla-carousel-react for carousels, react-resizable-panels for split layouts, and @dnd-kit/core for drag and drop. Wrap them with your own styling rather than reimplementing the state machine.

Render hidden input elements mirroring the component's value: one hidden input for single values, or one per item for multi-value controls like Tag Input. For required validation, render a visually hidden required text input when the value is empty so native constraint validation triggers.

Roving tabindex moves actual DOM focus between items, keeping only one item in the tab order, and suits toolbars, tabs, and pagination. aria-activedescendant keeps focus on an input while highlighting list items, and suits comboboxes, virtualized lists, and typeahead search.