Radix至Base UI代码迁移

专为 React 与 shadcn/ui 技术栈设计的前端重构流程。它支持单组件渐进式迁移（绞杀者模式）与全项目批量切换两种工作流，先检查 git 状态与类型系统基准，再利用官方样式基准（Golden Pair）进行三方合并，完整保留开发者的定制样式与逻辑；对于无对应原语的特殊组件（如 AspectRatio、Label）提供原生替代方案，确保替换期间应用始终可编译构建，并在迁移完成后在 .migration 目录生成逐个组件的审查日志与手动验证清单。

它会先理解你的原始内容和目标，再按清晰的步骤完成处理。你不需要学习复杂命令，也不用理解背后的技术细节。

常见场景

它能帮你做什么？

单个底层组件渐进式解耦

带深度定制样式的 UI 封装安全合并

整个前端项目底层无痛切换

三步完成

怎么使用

1安装 Skill

把右侧安装请求发给你的 AI。

2说清楚目标

告诉 AI 你想完成什么，或直接贴入内容。

3检查结果

按需要继续调整语气、范围或格式。

复制就能用

你可以直接这样说

“请采用渐进模式，把 components/ui/accordion.tsx 从 Radix UI 迁移到 Base UI，并检查所有消费该组件的页面。”

“将项目里定制过的 select.tsx 与 dropdown-menu.tsx 重构为 @base-ui/react 实现，不要覆盖我写在里面的 Tailwind 类名。”

“对整个 shadcn 项目执行 Base UI 全局迁移，先做叶子组件 button 和 label，完成后输出残留 Radix 引用统计与验证报告。”

适用人群

适合谁？

React 前端开发工程师shadcn/ui 技术栈维护者前端架构师与技术重构负责人

上手门槛

使用难度

专业

适合熟悉相关工具和专业流程的用户。

兼容范围

支持哪些 AI？

Codex可直接使用

Claude Code可直接使用

OpenClaw可直接使用

Hermes可直接使用

国内 Agent可直接使用

中文用户增强

Skill Px 做了什么？

中文说明简化使用方式补充中文案例整理安装流程降低理解难度

Radix至Base UI代码迁移.Skill