skills.rest
levinbaenninger
levinbaenningerCOMMUNITY
Explore all skills by this author →
Website𝕏@levinbaenningerGitHub

migrate-radix-to-base

Migrate React components from Radix UI to @base-ui/react.

Updated Jul 4, 2026
Search Tags:#refactoring#react#migration#shadcn#radix-ui#base-ui
One-click install
npx skills add https://github.com/levinbaenninger/website --skill migrate-radix-to-base
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-radix-to-base
Source: https://github.com/levinbaenninger/website/tree/main/.agents/skills/migrate-radix-to-base
Command: npx skills add https://github.com/levinbaenninger/website --skill migrate-radix-to-base

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the complex, error-prone process of migrating React components from Radix UI to Base UI, ensuring build stability and idiomatic code structure throughout the transition.

Core Features & Use Cases

  • Golden Pair Migration: Leverages shadcn CLI and three-way merges to preserve custom component logic while updating to Base UI primitives.
  • Transformation Engine: Provides mechanical rewrites for class strings, data attributes, and consumer-side prop changes.
  • Use Case: Use this when you need to switch a large-scale shadcn project from Radix to Base UI without breaking existing functionality or losing custom styling.

Quick Start

Use the migrate-radix-to-base skill to perform a whole-project migration from Radix UI to Base UI.

Frequently Asked Questions about migrate-radix-to-base

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate a shadcn project from Radix UI to Base UI?▼

To migrate a shadcn project from Radix UI to Base UI, this Skill automates component refactoring and full-project dependency swaps while maintaining build integrity. It leverages shadcn CLI and three-way merges to preserve custom component logic during the transition.

What is the best way to automate class-string rewriting when switching from Radix UI primitives?▼

Automating class-string rewriting when switching from Radix UI primitives is handled by the transformation engine, which mechanically rewrites class strings, data attributes, and consumer-side prop changes to match Base UI requirements.

Can I migrate individual React components instead of a full project from Radix to Base UI?▼

Yes, you can migrate individual React components from Radix to Base UI. The Skill handles both individual component refactoring and full-project dependency swaps, allowing for flexible migration scopes depending on project needs.

How does the Golden Pair migration method preserve custom shadcn styling?▼

The Golden Pair migration method preserves custom shadcn styling by leveraging the shadcn CLI alongside three-way merges. This updates components to Base UI primitives while retaining existing custom component logic and styling configurations.

What are the limitations of automated refactoring for Radix UI components?▼

A limitation of automated refactoring for Radix UI components is the potential for behavior deltas. The Skill addresses this by generating behavior delta reports to track differences, though manual review of complex custom logic may still be required.

Related Skills

Explore More Software Engineering Skills→
EhraxEhrax

using-git-worktrees

Creates isolated git worktrees for feature work with verified ignore rules and project setup.

Community
Advanced
ydnikolaevydnikolaev
8

qa-lead

Plan and validate E2E, API, and UI tests with generated reports.

Community
Advanced
braswelljrbraswelljr
8

shadcn

Manage shadcn/ui components via CLI with styling and accessibility validation.

Community
Advanced
fusenginefusengine
22

shadcn-components

Map Radix UI asChild patterns to Base UI render props for shadcn/ui components.

Community
Intermediate