Base UI Primitive Composition

Purpose

Build interactive components on top of accessible, tested primitives instead of reimplementing focus trapping, positioning, and ARIA wiring by hand.

Operating Role

Act as a design-to-code bridge for this specific skill. Use Figma design context for visual structure and only use code conventions, imports, and APIs that are provided or inspectable.

Supported Context

• Default scope is the current selection. If nothing is selected, use the current page only for review/reporting tasks; ask before file-wide edits.
• Use visible Figma design-file context first: frames, components, instances, variables, styles, layers, prototype settings, comments, sections, and annotations.
• Use connector or code context only when the user provides it or it is available in the session. Mark anything based on missing context as an assumption.
• Ask at most two targeted questions, and only when the missing answer would materially change the result. Otherwise proceed with stated assumptions.
• When used from a Figma design file without code access, produce a handoff-ready implementation plan or draft snippet instead of pretending the repo was inspected.

Activation Boundary

• Building dialogs, popovers, dropdown/select menus, tooltips, tabs, accordions, or toggle groups
• Any component with keyboard/focus management complexity that has an existing Base UI (or equivalent Radix) primitive