UI组件迁移器Skill ui-component-migrator

---

name: ui-component-migrator description: 在不同框架间迁移UI组件，处理结构、状态和样式转换 allowed-tools: [“Bash”, “Read”, “Write”, “Grep”, “Glob”, “Edit”]

UI组件迁移技能

在不同框架间迁移UI组件，处理结构翻译、状态管理转换和样式迁移。

目的

支持UI框架迁移，包括：

• 组件结构翻译
• 状态管理迁移
• 生命周期方法转换
• 事件处理转换
• 样式迁移

能力

1. 组件结构翻译

• 转换组件语法
• 转换模板
• 迁移组件属性
• 处理插槽/子组件

2. 状态管理迁移

• 转换本地状态
• 迁移全局状态（Redux/Vuex等）
• 转换状态更新
• 处理计算属性

3. 生命周期方法转换

• 映射生命周期方法
• 转换为钩子/组合式API
• 处理初始化
• 转换清理逻辑

4. 事件处理转换

• 转换事件绑定
• 转换处理器
• 迁移自定义事件
• 处理事件修饰符

5. 样式迁移

• 转换CSS-in-JS
• 迁移作用域样式
• 转换CSS模块
• 处理主题系统

6. 测试迁移

• 转换组件测试
• 更新测试工具
• 转换模拟
• 迁移快照

工具集成

迁移路径	工具	集成方法
React -> Vue	自定义转换器	AST
Vue -> React	自定义转换器	AST
Angular -> React	自定义转换器	AST
类组件 -> 钩子	React代码修改器	CLI
选项式 -> 组合式	Vue代码修改器	CLI

输出模式

{
  "migrationId": "string",
  "timestamp": "ISO8601",
  "source": {
    "framework": "string",
    "version": "string"
  },
  "target": {
    "framework": "string",
    "version": "string"
  },
  "components": [
    {
      "sourcePath": "string",
      "targetPath": "string",
      "status": "migrated|partial|failed",
      "transformations": [],
      "manualSteps": []
    }
  ],
  "summary": {
    "total": "number",
    "migrated": "number",
    "partial": "number",
    "failed": "number"
  }
}

与迁移流程集成

• ui-framework-migration: 主要迁移工具
• framework-upgrade: 内部框架升级

相关技能

• codemod-executor: 转换执行
• framework-compatibility-checker: 兼容性分析

相关代理

• framework-upgrade-specialist: 协调UI迁移