Conectar

Cross-Framework Migrator

HerbertJuliobyHerbertJulio
•
10
•
Herramientas para Desarrolladores

Automates the migration of components and project logic between React, Vue, Svelte, and Angular while maintaining idiomatic code patterns.

The Cross-Framework Migrator is a specialized Claude Code skill designed to handle the heavy lifting of porting frontend code across different ecosystems. It performs a multi-phase transformation that analyzes source component structures—including state management, lifecycle hooks, and props—and maps them to the appropriate patterns in the target framework (such as React Hooks to Vue Composition API). This tool is essential for teams modernizing legacy codebases, consolidating technical stacks, or sharing UI logic across diverse frontend projects without manual rewrites.

Características Principales

01Intelligent mapping of state, props, and lifecycle hooks (e.g., useState to ref)
02Preservation of TypeScript types and complex interfaces
03Bidirectional conversion between React, Vue 3, and Svelte
04Automatic JSX to Vue/Svelte template syntax transformation
0510 GitHub stars
06Post-migration validation report with manual review flags for complex logic

Casos de Uso

01Porting a shared React component library to a new SvelteKit project
02Refactoring Angular modules into React or Vue components during a tech stack migration
03Modernizing a legacy Vue 2 application to Vue 3 Composition API
name migrate-framework
description Use when switching a project or component between frameworks - React to Vue, Vue to Svelte, or any supported framework pair.
user-invocable true
argument-hint [source-framework] to [target-framework] [file-or-directory]
allowed-tools Read, Write, Edit, Bash, Glob, Grep

/migrate-framework - Cross-Framework Migration

Migrate code from one framework to another while preserving functionality.

Arguments: $ARGUMENTS (e.g., "react to vue src/components/Button.tsx")

Supported Migrations

From To Status
React Vue 3 Full
React Svelte Full
Vue 2 Vue 3 Full
Vue 3 React Full
Vue 3 Svelte Full
Angular React Partial
Angular Vue 3 Partial

Workflow

Phase 1: Analysis

  1. Parse source framework code
  2. Identify:
    • Component structure
    • Props and state
    • Lifecycle hooks
    • Event handlers
    • Computed values
    • Side effects

Phase 2: Mapping

React → Vue 3

React Vue 3
useState ref() / reactive()
useEffect onMounted, watch
useMemo computed()
useCallback Regular function
useContext provide/inject
props defineProps()
children <slot />
className class
onClick @click 
// React
function Button({ label, onClick }) {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log('mounted')
  }, [])

  return (
    <button className="btn" onClick={() => setCount(c => c + 1)}>
      {label}: {count}
    </button>
  )
}

// Vue 3
<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{ label: string }>()
const emit = defineEmits<{ click: [] }>()

const count = ref(0)

onMounted(() => {
  console.log('mounted')
})
</script>

<template>
  <button class="btn" @click="count++">
    {{ label }}: {{ count }}
  </button>
</template>

Vue 3 → React

Vue 3 React
ref() useState
reactive() useState with object
computed() useMemo
watch useEffect
onMounted useEffect(fn, [])
provide/inject useContext
<slot /> children
v-if {condition && ...}
v-for .map()
@click onClick

React → Svelte

React Svelte
useState let variable
useEffect onMount, $:
useMemo $: derived
props export let
children <slot />
className class
onClick on:click

Phase 3: Migration

  1. Create target file structure
  2. Convert component syntax
  3. Migrate state management
  4. Update imports
  5. Convert templates/JSX
  6. Adapt styling approach

Phase 4: Validation

  1. Check TypeScript types
  2. Verify props match
  3. Test component renders
  4. Compare behavior

Output

──── Migration Complete ────

Source: React (src/components/Button.tsx)
Target: Vue 3 (src/components/Button.vue)

Conversions:
  ✓ useState → ref (2 instances)
  ✓ useEffect → onMounted (1 instance)
  ✓ Props interface → defineProps
  ✓ JSX → Vue template
  ✓ className → class

Manual review needed:
  - Line 15: Complex useEffect dependency array
  - Line 23: Custom hook needs separate migration

Files created:
  - src/components/Button.vue

Rules

  1. Preserve behavior - Functionality must match
  2. Type safety - Maintain TypeScript types
  3. Idiomatic code - Use target framework patterns
  4. Flag manual work - Mark complex conversions
  5. Keep original - Don't delete source files

Limitations

  • Custom hooks require separate migration
  • Third-party component libraries may not have equivalents
  • Some patterns don't translate directly
  • CSS-in-JS needs manual adaptation