Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

UI Component Migrator Skill · a5c-ai | DecimalAI

a5c-ai/ui-component-migrator

SkillScore23Maintained

Migrate UI components between frameworks with structure, state, and style transformation

Frontendby a5c-ai

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/a5c-ai-ui-component-migrator/SKILL.md

decimalai skills pull a5c-ai-ui-component-migrator --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/a5c-ai-ui-component-migrator/SKILL.md https://app.decimal.ai/s/a5c-ai-ui-component-migrator/SKILL.md

Raw file: /s/a5c-ai-ui-component-migrator/SKILL.md ↗ · machine-readable summary at /s/a5c-ai-ui-component-migrator.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 56d ago

Yes — +18% lift · at higher cost+28% tokens0% turns23% of whole cases pass with skill (5/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	59%	0%
case-02	✗→✓	▲ Improved	5%	0%
case-03	✗→✓	▲ Improved	-37%	0%
case-14	✗→✓	▲ Improved	20%	0%
case-16	✓→✓	＝ Same ✓	73%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 7/31/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

a5c-ai / babysitter

library/specializations/code-migration-modernization/skills/ui-component-migrator/SKILL.md

View on GitHub ↗

License MITImported 7/31/2026Version v1

Skill contents

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

json
{
  "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

Illustrative Want to see what a5c-ai/ui-component-migrator would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/1/2026, 01:54 UTC · 22 cases

Lift

+18%

23% vs 5%

Agent turns

0%

1.0 vs 1.0

Tokens

+28%

2,915.82 vs 2,272.27

fail → pass · 4pass → pass · 1fail → fail · 17

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 We are converting our legacy React class components in `/src/components/ui/` to Vue 3 Composition API components under `/src/components/vue/`. Please execute the structure, state, and style transformations for these components, and output a JSON execution report containing migration metadata, target/source framework details, an array of component records (including original and new file paths, outcome status, applied transformations, and manual steps needed), along with a summary object counting total, migrated, partial, and failed components.	fail→pass	10,010	13,077	+31%	1	1	0%	2,398	3,813	+59%	0	0	—
case-02 Refactor our Vue 2 Options API dashboard widgets located in `./src/widgets/` over to React 18 functional components with hooks. We need you to map state handling, custom events, and scoped styling. Return a structured JSON response detailing the run ID, timestamp, framework specs, per-component transformation progress with status and manual action items, plus aggregate summary counters.	fail→pass	12,680	8,731	-31%	1	1	0%	2,372	2,493	+5%	0	0	—
case-03 Migrate our Angular navigation and table components to React hooks components. Convert template bindings, event modifiers, and CSS modules. Provide the final result strictly in JSON schema format listing the source and target framework info, individual component migration entries showing target paths and manual work items, and complete summary metrics for all processed files.	fail→pass	24,549	14,500	-41%	1	1	0%	4,468	2,837	-37%	0	0	—
case-04 We are migrating styled-components in React to Vue 3 single file components. Most teams convert styled wrappers into utility classes, but we need scoped CSS blocks. How should the style migration handle component-specific styling?	fail→fail	20,155	24,293	+21%	1	1	0%	3,266	4,930	+51%	0	0	—
case-05 When migrating a React library component that exposes children as a function (`children={(item) => <Row data={item} />}`) to Vue 3, team members suggested passing render functions as props. What pattern should be used instead?	fail→fail	8,046	9,650	+20%	1	1	0%	1,494	1,988	+33%	0	0	—
case-06 We have Vue components with heavy getters in `computed:` sections. Developers often convert these to plain class methods called inside render. How should computed getters be converted when targetting React functional components?	fail→fail	13,149	15,862	+21%	1	1	0%	2,143	3,255	+52%	0	0	—
case-07 Our React app relies heavily on `React.createContext` and `useContext` for deep dependency injection across header widgets. Convert these patterns to Vue 3 equivalents.	fail→fail	17,062	11,151	-35%	1	1	0%	2,809	2,683	-4%	0	0	—
case-08 We are converting a Vue component that uses `$emit('update:modelValue', val)` and custom events like `$emit('tab-selected', id)` into a React component. How are custom events transformed?	fail→fail	11,449	10,945	-4%	1	1	0%	2,093	2,872	+37%	0	0	—
case-09 Convert Angular templates using `ngIf="isVisible"` and `ngFor="let item of items; trackBy: trackFn"` into React functional component syntax.	fail→fail	9,513	7,721	-19%	1	1	0%	1,675	2,092	+25%	0	0	—
case-10 In a legacy React component, DOM measuring happens in `componentDidMount` and event listeners are detached in `componentWillUnmount`. How are these converted for Vue 3 Composition API?	fail→fail	9,616	14,031	+46%	1	1	0%	2,021	3,117	+54%	0	0	—
case-11 Convert Vue 3 deep watchers (`watch(filters, (newVal) => fetchResults(newVal), { deep: true })`) into React functional component hooks.	fail→fail	12,715	11,022	-13%	1	1	0%	2,390	2,687	+12%	0	0	—
case-12 We have React class components connected via `connect(mapStateToProps, mapDispatchToProps)(MyComponent)`. How is this store integration converted when migrating to Vue 2 Options API?	fail→fail	12,005	12,667	+6%	1	1	0%	2,561	3,242	+27%	0	0	—
case-13 Migrate a Vue 2 Options component's `data()` object containing `counter: 0` and `user: null` to React functional component state declarations.	fail→fail	4,304	6,360	+48%	1	1	0%	844	1,832	+117%	0	0	—
case-14 An Angular component injects an RxJS-based `UserService` into its constructor. How should this dependency and state subscription be refactored when converting to a React hook component?	fail→pass	13,454	13,750	+2%	1	1	0%	2,667	3,213	+20%	0	0	—
case-15 Convert a React component importing `styles from './Button.module.css'` with `className={styles.primary}` into a Vue S FC.	fail→fail	9,324	9,475	+2%	1	1	0%	1,902	2,467	+30%	0	0	—
case-16 Convert `@testing-library/react` component tests using `render(<Button label="Click" />)` and `screen.getByRole('button')` to Vue testing code.	pass→pass	7,903	11,125	+41%	1	1	0%	1,727	2,990	+73%	0	0	—
case-17 How are React synthetic event handlers like `onChange={(e) => setVal(e.target.value)}` and `onKeyDown={(e) => e.preventDefault()}` transformed for Vue template bindings?	fail→fail	9,709	12,059	+24%	1	1	0%	1,924	2,816	+46%	0	0	—
case-18 Convert a Vue component with a default slot and a named `#header` slot into React component prop structures.	fail→fail	8,535	9,333	+9%	1	1	0%	1,800	2,511	+40%	0	0	—
case-19 A React component uses `React.forwardRef` to expose an internal imperative handle (`useImperativeHandle`) to parent components. How is this translated to Vue 3 Composition API?	fail→fail	10,837	11,611	+7%	1	1	0%	2,188	3,139	+43%	0	0	—
case-20 We are migrating an Express.js REST API with routes like `app.get('/users', (req, res) => res.json(users))` over to Fastify plugins. Transform our routing and middleware definitions to Fastify format.	fail→fail	15,060	10,705	-29%	1	1	0%	3,220	2,852	-11%	0	0	—
case-21 We need to migrate our database schema definitions and SQL queries from Knex.js query builder migrations to Prisma schema files (`schema.prisma`). Convert our `knex.schema.createTable('users')` block.	fail→fail	5,050	10,783	+114%	1	1	0%	971	2,853	+194%	0	0	—
case-22 Convert our Webpack config (`webpack.config.js`) containing `module.rules` for Babel, loaders, and plugins over to a Vite config (`vite.config.ts`).	fail→fail	18,247	13,037	-29%	1	1	0%	3,057	3,466	+13%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of +18 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 4.6%
Pass rate with the skill: 22.7%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/1/2026, 01:54 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Prompt

We are converting our legacy React class components in `/src/components/ui/` to Vue 3 Composition API components under `/src/components/vue/`. Please execute the structure, state, and style transformations for these components, and output a JSON execution report containing migration metadata, target/source framework details, an array of component records (including original and new file paths, outcome status, applied transformations, and manual steps needed), along with a summary object counting total, migrated, partial, and failed components.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run23

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+73% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 55 days ago

Other measured skills in the registry, with their headline benchmark lift.