Ui component migrator

Skill a5c-ai/babysitter/library/specializations/code-migration-modernization/skills/ui-component-migrator

Migrate UI components between frameworks with structure, state, and style transformationFrom its SKILL.md

Install

npx -y skills add a5c-ai/babysitter --skill ui-component-migrator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

2.9 KB, 549 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 1 file

1.4 KB alongside SKILL.md

README.md1.4 KB