a5c-ai/ui-component-migrator
library/specializations/code-migration-modernization/skills/ui-component-migrator/SKILL.md
Migrate UI components between frameworks with structure, state, and style transformation
$ install --global
skillsauthnpx skillsauth add a5c-ai/babysitter ui-component-migratorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 28, 2026, 4:40 PM195.9s2 files scanned
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"]
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
Related Skills
a5c-ai/model-card-generator
development
VerifiedTrustedCommunity
Model documentation skill for generating model cards following Google's model card framework.
680SKILL.mdUpdated Apr 28, 2026
a5c-ai/mlflow-experiment-tracker
development
VerifiedTrustedCommunity
MLflow integration skill for experiment tracking, model registry, and artifact management. Enables LLMs to log experiments, compare runs, manage model lifecycle, and retrieve artifacts through the MLflow API.
680SKILL.mdUpdated Apr 28, 2026
a5c-ai/lime-explainer
data-ai
VerifiedTrustedCommunity
LIME-based local explanation skill for individual predictions across tabular, text, and image data.
680SKILL.mdUpdated Apr 28, 2026
a5c-ai/kubeflow-pipeline-executor
devops
VerifiedTrustedCommunity
Kubeflow Pipelines skill for ML workflow orchestration, component management, and Kubernetes-native ML.
680SKILL.mdUpdated Apr 28, 2026