Legacy Code Modernizer

The problem

Legacy code migrations often devolve into "big-bang" rewrites that break production and leave codebases in a half-finished, inconsistent state. Syntactic changes are easy, but preserving behavior across lifecycle methods, event delegation, and module systems is where most migrations fail.

What it does

• Analyzes legacy frontend code to identify high-risk patterns like jQuery event delegation, class component lifecycle methods, and CommonJS module caching.
• Generates incremental migration sequences using the "strangle" pattern to avoid high-risk, all-at-once rewrites.
• Maps complex transformations such as React lifecycle-to-hook transitions and Gulp/Webpack to Vite build configurations.
• Drafts characterization tests to lock in current behavior before refactoring begins.
• Identifies hidden dependencies in global jQuery plugins and non-obvious module side effects.

Frameworks & tools

React (Class & Hooks), Vue (Options & Composition API), jQuery, Vite, Webpack, Gulp, CommonJS, and ESM.

Why this beats prompting it yourself

Standard LLM prompts often provide naive syntax translations that ignore the nuances of this binding, execution timing, and event bubbling. This skill prioritizes risk management, forcing a sequenced plan that accounts for test coverage and blast radius rather than just returning a code diff.

Use cases

• Migrating a jQuery-heavy legacy app to vanilla JS or a modern framework.
• Converting React class components to hooks without breaking lifecycle logic.
• Upgrading outdated build pipelines from Webpack or Gulp to Vite/esbuild.
• Transitioning a backend or frontend codebase from CommonJS to ESM modules.

Known limitations

Focuses primarily on frontend and build tooling migrations. Requires manual verification of business logic criticality if not explicitly provided.