Skip to main content

Claude Prompt for AI-Assisted Framework Migration

Plan an AI-assisted framework migration: dependency audit, component-by-component porting, routing, state, tests, validation, and a tracking sheet.

Fill in the placeholders

Edit the values, then copy your finished prompt.

Your Prompt
prompt.txt
Plan and execute an AI-assisted migration from Vue.js 2 with Options API to React 18 with hooks for a an e-commerce admin dashboard with 60 pages. The codebase has 320 files and 180 existing tests. Follow this migration workflow: 1) Generate a compatibility audit prompt that feeds the AI your package.json/requirements.txt and asks it to map every Vue.js 2 with Options API dependency to its React 18 with hooks equivalent, flagging packages with no direct equivalent and suggesting alternatives. 2) Create a component migration prompt template that takes a single Vue.js 2 with Options API component, its props/interface, its tests, and produces the equivalent React 18 with hooks component preserving identical behavior — run this iteratively across all pages, layouts, forms, tables, modals, charts component types. 3) Design a routing migration prompt that converts the entire route configuration from Vue Router 3 to React Router 6, preserving route guards, middleware, lazy loading, and URL parameters. 4) Build a state management migration prompt that transforms Vuex patterns to Zustand, mapping actions, reducers, selectors, and side effects one-to-one. 5) Create a test migration prompt that converts test files from Vue Test Utils with Jest to React Testing Library with Vitest, adapting assertions, mocks, and setup/teardown patterns. 6) Design a validation prompt that compares the original and migrated versions by generating a feature checklist from the source code and verifying each feature exists in the target. 7) Produce a migration tracking spreadsheet template with columns for file path, migration status, reviewer, test status, and notes.

What this prompt does

This prompt plans and executes an AI-assisted migration from [source_framework] to [target_framework] for an application described by [app_description], with [file_count] files and [test_count] tests. Rather than a vague "rewrite it" request, it defines a seven-step workflow that moves the codebase piece by piece while preserving behavior.

The structure works because it sequences risk sensibly. A compatibility audit maps every [source_framework] dependency to its [target_framework] equivalent up front, flagging dead-ends before you are committed. A per-component template ports one [component_categories] element at a time, carrying its props and tests across so behavior is preserved. Dedicated steps convert routing from [source_routing] to [target_routing], state from [source_state] to [target_state], and tests from [source_test_framework] to [target_test_framework], each mapped one-to-one. A validation step generates a feature checklist from the source and verifies each feature exists in the target, and a tracking spreadsheet keeps status visible across the whole migration.

When to use it

  • You are moving a frontend between frameworks and want a safe, incremental plan.
  • You need to know early which dependencies have no [target_framework] equivalent.
  • You want components ported one at a time with their tests, not all at once.
  • You need routing, state, and tests migrated with explicit one-to-one mappings.
  • You want a feature-parity check between the old and new versions.
  • You need a tracking sheet to manage a migration across many files and reviewers.

Example output

Expect a migration plan built from reusable prompts rather than a one-shot conversion. It begins with a compatibility audit table that maps each [source_framework] dependency to its [target_framework] equivalent and flags packages with no direct match. Then comes a component-migration template you apply iteratively across your [component_categories], each port carrying its props and tests so behavior is preserved. Dedicated prompts handle routing conversion from [source_routing] to [target_routing], state-management mapping from [source_state] to [target_state], and test conversion from [source_test_framework] to [target_test_framework]. A validation checklist generated from the source verifies feature parity in the target, and a tracking spreadsheet with file path, status, reviewer, test status, and notes keeps the whole effort visible.

Pro tips

  • Run the compatibility audit first and resolve every flagged dependency before porting code — a dead-end found halfway through is the most expensive failure mode.
  • Keep the per-component template tight: port one [component_categories] element plus its tests, review, then move on.
  • Migrate tests alongside each component, not at the end, so you always have a behavioral check on what you just ported.
  • Set [source_state] and [target_state] precisely; a sloppy state mapping is where subtle behavior changes hide.
  • Use the validation step on every component, since framework idioms differ enough that visual parity can mask missing behavior.
  • Keep the tracking sheet current; on a [file_count]-file migration it is the only reliable view of what is done.

Frequently Asked Questions

Does it migrate the whole app at once or incrementally?
Incrementally. The core of the workflow is a per-component template that ports one element at a time along with its props, interface, and tests, run iteratively across your `[component_categories]`. This keeps each change reviewable and preserves behavior far better than a big-bang rewrite.
How does the compatibility audit help before I start?
It maps every `[source_framework]` dependency to its `[target_framework]` equivalent and flags any package with no direct match, suggesting alternatives. Doing this up front stops you from discovering a dead-end dependency after you have already migrated half the codebase.
Does it handle routing and state, not just components?
Yes. There are dedicated steps that convert routing from `[source_routing]` to `[target_routing]` and state from `[source_state]` to `[target_state]`, mapping guards, lazy loading, actions, reducers, and selectors one-to-one. These are common sources of subtle regressions, so they get their own focused prompts.
How do I verify the migration didn't lose features?
The validation step generates a feature checklist from the source code and verifies each item exists in the target. Because framework idioms differ, visual parity alone can hide missing behavior, so running this check per component is what confirms true feature parity.
Engr Mejba Ahmed

Need this built for real?

Engr Mejba Ahmed

AI Developer · Software Engineer

I'm Mejba — I design and ship production AI systems, automations, and full-stack apps. If you want this turned into a working solution for your team, let's talk.

More in AI Coding Assistants

Engr Mejba Ahmed

Engr Mejba Ahmed

AI assistant · trained on my work

👋

Hey there!

Quick Actions

WhatsApp Direct line to me

Chat on WhatsApp

+880 1723 741224 · Replies within the hour on working days

Popular Questions

Engr Mejba Ahmed is connected
Engr Mejba Ahmed is typing...
Engr Mejba Ahmed avatar

✉ Want me to follow up? Drop your email

Engr Mejba Ahmed avatar

📞 Connect Directly

Choose how you'd like to reach me

WhatsApp

+880 1723 741224

Email

mejba.13@gmail.com

✓ Details sent! I'll get back to you shortly.

Powered by OpenAI

335+

Blog Posts

25

AI Courses

63

Projects

Services & Expertise

Pricing & Process

Learning & Resources

Connect & Support