ReddRadar
Agent skill
ui-component-migrator
Migrate UI components between frameworks with structure, state, and style transformation
Install this agent skill to your Project
npx add-skill https://github.com/a5c-ai/babysitter/tree/main/library/specializations/code-migration-modernization/skills/ui-component-migrator
SKILL.md
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 executionframework-compatibility-checker: Compatibility analysis
Related Agents
framework-upgrade-specialist: Orchestrates UI migration
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
a5c-ai/babysitter
gsd-tools
Central utility skill for GSD operations. Provides config parsing, slug generation, timestamps, path operations, and orchestrates calls to other specialized skills. Acts as the unified entry point that the original gsd-tools.cjs provided via its lib/ modules (commands, config, core, init).
a5c-ai/babysitter
model-profile-resolution
Resolve model profile (quality/balanced/budget) at orchestration start and map agents to specific models. Enables cost/quality tradeoffs by selecting appropriate AI models for each agent role.
a5c-ai/babysitter
verification-suite
Plan structure validation, phase completeness checks, reference integrity verification, and artifact existence confirmation. Provides the structured verification layer ensuring GSD artifacts are well-formed and complete.
a5c-ai/babysitter
state-management
STATE.md reading, writing, and field-level updates. Provides cross-session state persistence via .planning/STATE.md with structured fields for current task, completed phases, blockers, decisions, and quick tasks.
a5c-ai/babysitter
git-integration
Git commit patterns, formats, and conventions for GSD methodology. Provides atomic commits per task, structured commit messages, planning file commits, branch management, and milestone tag operations.
a5c-ai/babysitter
frontmatter-parsing
YAML frontmatter parsing and manipulation for .planning/ documents. Provides read, write, update, query, and validation operations on frontmatter blocks in GSD markdown artifacts.
Didn't find tool you were looking for?