fec-legacy-to-modern-migration

Plan and execute staged migrations from legacy JavaScript and jQuery to React, Vue, or Next/Nuxt.

21|3|Updated Mar 17, 2026

Search Tags:#planning #frontend #migration #risk-management #legacy-code #modern-stack

Ready to run

npx skills add https://github.com/bovinphang/frontend-craft --skill fec-legacy-to-modern-migration

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fec-legacy-to-modern-migration
Source: https://github.com/bovinphang/frontend-craft/tree/main/localized/zh-CN/skills/fec-legacy-to-modern-migration
Command: npx skills add https://github.com/bovinphang/frontend-craft --skill fec-legacy-to-modern-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

## What problem does it solve? Legacy frontend projects (JavaScript, jQuery, HTML/CSS, server-rendered templates, and multi-page apps) often suffer from inconsistent patterns, high risk during modernization, and fragmented migration paths. This skill provides a guided framework to plan and execute progressive migrations to modern stacks while preserving behavior.

## Core Features & Use Cases

Provides a guided migration strategy leveraging a gradual strangler pattern with clear mappings from legacy concepts to modern frameworks (React, Vue, Next/Nuxt).
Includes phased plan templates covering stages from preparation to post-migration stabilization, with milestones and risk controls.
Leverages references to strategy and execution artifacts (references/migration-strategy-and-mapping.md, references/migration-execution-checklist.md, references/migration-report-template.md) to drive artifacts and governance.

### Quick Start Plan a staged migration from a legacy JavaScript/jQuery project to a modern React or Vue stack, identify the target architecture, create a migration backlog, and generate a risk-adjusted rollout plan.

Frequently Asked Questions about fec-legacy-to-modern-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I migrate a legacy jQuery and HTML/CSS frontend to a modern React or Vue stack?▼

Migrate legacy jQuery and HTML/CSS frontends to React or Vue using a gradual strangler pattern, mapping legacy patterns to modern equivalents while preserving behavior. This staged approach ensures risk-controlled delivery with clear milestones and rollback points.

What is the strangler pattern for frontend modernization?▼

The strangler pattern progressively replaces legacy multi-page application code with modern framework components, allowing incremental migration without a full rewrite. It maps server-rendered templates and jQuery logic to React, Vue, Next, or Nuxt equivalents.

Can I use this migration strategy for server-rendered templates in a multi-page application?▼

Yes, this migration strategy explicitly supports multi-page applications with server-rendered templates. It provides staged plans mapping template logic to modern client-side or hybrid rendering in React, Vue, Next, or Nuxt.

How do I manage risk during a frontend codebase migration?▼

Manage frontend migration risk using execution checklists, reporting templates, and phased rollout plans with explicit milestones. This governance framework ensures risk-controlled delivery from preparation through post-migration stabilization.

What's the best way to plan an incremental modernization of a legacy JavaScript codebase?▼

Plan incremental modernization of legacy JavaScript by creating a migration backlog and a risk-adjusted rollout plan. Identify the target architecture and use strategy documents to phase the transition from preparation to post-migration stabilization.

When should I not use a gradual strangler pattern for frontend migration?▼

Avoid the gradual strangler pattern when a legacy frontend codebase is too small to justify incremental overhead or lacks inconsistent patterns requiring governance. A full rewrite may be more efficient for simple, isolated applications without server-rendered template dependencies.