Works with the AI tools you already use
Claude Code
Cursor
Codex CLI
GitHub Copilot
Gemini CLI+17 moreClaude CodeCursorCodex CLIGitHub CopilotGemini CLI
VS Code
Windsurf
Manus+14 moreLegacy Code Modernizer
Plans and executes safe, incremental migrations of legacy frontend code to modern frameworks and build tools.
Free
See it in action
You say
I have a legacy React class component with complex componentDidUpdate and componentWillUnmount logic. How do I safely move this to hooks without breaking the cleanup?
Your agent does
I've analyzed your component. A direct translation to useEffect is risky due to lifecycle timing differences. I have generated a 4-step migration plan: first, characterization tests for the cleanup side effects; second, a sequenced refactor of the update logic; third, the hooks implementation.
About this skill
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.
How to install
Drop the file into your AI Agent. Works with Claude, Cursor, ChatGPT, and 20+ more.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean today
- Free to download with an account