ui-component-migrator
npx machina-cli add skill a5c-ai/babysitter/ui-component-migrator --openclawUI 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 executionframework-compatibility-checker: Compatibility analysis
Related Agents
framework-upgrade-specialist: Orchestrates UI migration
Source
git clone https://github.com/a5c-ai/babysitter/blob/main/plugins/babysitter/skills/babysit/process/specializations/code-migration-modernization/skills/ui-component-migrator/SKILL.mdView on GitHub Overview
UI Component Migrator converts components between frameworks by translating structure, converting state management, and migrating styles. It also handles lifecycle methods, event bindings, and test migration to preserve behavior across frameworks. This enables cross-framework upgrades and platform migrations with consistent results.
How This Skill Works
The tool uses custom transformers and AST-based workflows to map component structure, props, and slots, and to translate state (local/global) and lifecycle methods to the target framework (e.g., hooks or composition API). It also migrates styling approaches (CSS-in-JS, scoped styles, CSS modules, themes) and rewrites event handlers and custom events. The process outputs a migration log and a structured summary suitable for review and testing.
When to Use It
- Migrating a component between major frameworks (e.g., React ⇄ Vue, Angular → React)
- Converting local and global state when frameworks use different state models
- Transforming lifecycle methods to hooks or composition APIs
- Migrating event bindings and custom events across frameworks
- Moving styles from CSS modules or CSS-in-JS to the target framework's styling system
Quick Start
- Step 1: Specify sourcePath and targetPath for the component to migrate
- Step 2: Run the migration with the ui-framework-migration tool (custom transformers/AST)
- Step 3: Review the transformations, apply manual steps if needed, and run tests
Best Practices
- Start with small, representative components to validate structure/state/style mappings
- Map props, events, and slots before implementing code changes
- Preserve state boundaries and side effects during migration
- Run the MIGRATION in a staging environment and update mocks/snapshots
- Review and test style tokens and themes to ensure visual parity
Example Use Cases
- React → Vue: migrate a Button component preserving props and onClick behavior
- Vue → React: migrate a Card component with slots and composition API to hooks
- Angular → React: migrate a Form component with internal state and validations
- Redux-connected component → Vuex-based state in Vue
- CSS Modules → scoped styles in the target framework, preserving class names and theming
