Build Primitive

VerifiedStable

Build foundational components from scratch when no Base UI primitive exists

v1.0.0·Prototyper·Primitives

The definitive guide for creating 10/10 components without an existing Base UI wrapper — ARIA contracts, keyboard navigation, focus management, controlled/uncontrolled state, form integration, animation lifecycle, and click-outside dismissal. Covers presentational, interactive, form control, and complex composite archetypes.

$curl -fsSL https://prototyper-ui.com/install.sh | bash -s build-primitive

$claude skill add https://prototyper-ui.com/install.sh build-primitive

What Your AI Learns

Four archetypes — presentational, interactive, form control, composite

ARIA role selection — decision tree for 20+ roles with state attributes

Keyboard navigation — roving tabindex, active descendant, grid, typeahead

Focus management — trapping, restoration, initial focus placement

Controlled/uncontrolled — useControllableState hook with dual-mode pattern

Form integration — hidden inputs, constraint validation, Field compatibility

Animation lifecycle — useAnimatedPresence for mount/unmount transitions

Click outside & Escape — dismissal hooks for overlay-like components

40+ item checklist — HTML/ARIA, keyboard, focus, state, styling, form

Prototyper UI

All Skills