Menu
Migrate UI components between frameworks with structure, state, and style transformation
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/a5c-ai/babysitter --skill ui-component-migratorThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Reference for querying the Atlas knowledge graph through its MCP tools — the SECONDARY enrichment/comparison layer that adds best-practice context to systems you have ALREADY scanned from your real sources (`az`, repos, dirs). Use when you need to look up nodes, edges, kinds, clusters, stats, or wiki pages in Atlas to compare against your real inventory. (atlas graph, query atlas, atlas mcp, search the graph, graph neighbors, atlas record, atlas kinds, enrichment layer)
Atlas turns your STATED NEED into a real systems atlas by SCANNING your actual sources (Azure via `az`, git repos, local dirs) and process/data mining them, THEN enriching against the Atlas knowledge graph. Use this skill when asked to inventory/map your real systems, scan your cloud + repos + directories, mine the real processes or data they contain, or collect their real constraints/gotchas. (atlas, scan my systems, inventory our azure account, map my repos, real systems atlas, process mining, data mining, collect nuances, system discovery)
This skill should be used when the user asks to "find skills in the wild", "assimilate popular workflows", "discover SKILL.md files in repos", "research external skills", "find workflow patterns", "survey the skill landscape", "what skills exist out there", or wants to investigate public repositories for extractable processes, babysitter plugins, and reusable procedural insights. Searches GitHub for SKILL.md files, classifies repos by archetype, and maintains structured research under docs/reference-repos/.
Showing SKILL.md
| name | ui-component-migrator |
| description | Migrate UI components between frameworks with structure, state, and style transformation |
| allowed-tools | ["Bash","Read","Write","Grep","Glob","Edit"] |
| graph | {"domains":["domain:software-engineering"],"specializations":["specialization:code-migration-modernization"],"skillAreas":["skill-area:dependency-upgrade-strategies","skill-area:breaking-change-management"],"roles":["role:frontend-engineer","role:backend-engineer"],"workflows":["workflow:technical-debt-reduction"],"topics":["topic:refactoring"]} |
Migrates UI components between different frameworks, handling structure translation, state management conversion, and style migration.
Enable UI framework migration for:
| 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 |
{
"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"
}
}
codemod-executor: Transformation executionframework-compatibility-checker: Compatibility analysisframework-upgrade-specialist: Orchestrates UI migrationBased on SOC occupation classification
