base-ui-migrator

name

base-ui-migrator

description

Migrates React UI code to Base UI (`@base-ui/react`) — replacing bespoke modals, custom dropdowns, raw `<dialog>`/`<select>` elements, ad-hoc popovers/menus/tooltips, or other component libraries (Radix UI, Headless UI, Reach UI). Ships a 37-component catalog (snapshotted from base-ui.com/llms.txt) and scripts to refresh it, scan for migration candidates, and verify the migration compiles. Triggers on phrases like "migrate to base-ui", "use base-ui instead of X", "replace this dialog/popover/menu with base-ui", or when scanning a React codebase for components Base UI can replace. Trigger even if the user only mentions one component (e.g., "swap this modal for base-ui dialog") — the workflow scales from one file to a whole repo.

Base UI Migrator

Automated workflow that converts bespoke React UI primitives and other component libraries to Base UI (@base-ui/react).

Base UI is the unstyled successor to Radix UI, maintained by the Material UI team and Radix authors. It exposes the same composition model (Root + parts) but with a single canonical API, modern data attributes for state styling, and built-in transitions. This skill knows the full catalog (37 components, snapshotted) and how to map common bespoke patterns to it.

When to Apply

Use this skill when:

• The user explicitly asks to migrate to Base UI, or to a specific Base UI component.
• You spot a React file with bespoke overlays — manual modals, dropdown menus built from useState + click-outside hooks, floating UI compositions — that have a Base UI equivalent.
• The codebase uses Radix UI, Headless UI, Reach UI, or react-aria components — these are 1:1 mappable to Base UI.
• The user wants to consolidate a fragmented set of UI primitives behind one library.
• The user wants to scan a directory for migration opportunities.

Do NOT trigger when:

• The user is starting a fresh project and asks for a UI library recommendation (suggest they install Base UI directly, no migration needed).