UI Component Migrator Skill

Migrates UI components between different frameworks, handling structure translation, state management conversion, and style migration.

Purpose

Enable UI framework migration for:

Component structure translation
State management migration
Lifecycle method conversion
Event handling transformation
Style migration

Capabilities

1. Component Structure Translation

Convert component syntax
Transform templates
Migrate component props
Handle slots/children

2. State Management Migration

Convert local state
Migrate global state (Redux/Vuex/etc)
Transform state updates
Handle computed properties

3. Lifecycle Method Conversion

Map lifecycle methods
Convert to hooks/composition API
Handle initialization
Transform cleanup logic

4. Event Handling Transformation

Convert event bindings
Transform handlers
Migrate custom events
Handle event modifiers

5. Style Migration

Convert CSS-in-JS
Migrate scoped styles
Transform CSS modules
Handle theme systems

6. Test Migration

Convert component tests
Update test utilities
Transform mocking
Migrate snapshots

Tool Integrations

| Migration Path | Tools | Integration Method | |---------------|-------|-------------------| | React -> Vue | Custom transformers | AST | | Vue -> React | Custom transformers | AST | | Angular -> React | Custom transformers | AST | | Class -> Hooks | React codemods | CLI | | Options -> Composition | Vue codemods | CLI |

Output Schema

{
  "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"
  }
}

Integration with Migration Processes

ui-framework-migration: Primary migration tool
framework-upgrade: Internal framework upgrades

Related Skills

codemod-executor: Transformation execution
framework-compatibility-checker: Compatibility analysis

Related Agents

framework-upgrade-specialist: Orchestrates UI migration

ui-component-migrator

Como adicionar

Cole no README do seu repo

Skills relacionadas

frontend-design

mcp-builder

webapp-testing

web-artifacts-builder

Receba novas skills de Design e Frontend toda segunda