Frontend Refactor Planner

The frontend-refactor-planner skill analyzes existing codebases to generate structured strategies for modernizing legacy applications without breaking functionality. It identifies technical debt, suggests architectural improvements, and outlines step-by-step migration paths tailored to specific frameworks.

When to use it

• Planning a major version upgrade (e.g., React 16 to React 18) while minimizing downtime.
• Refactoring monolithic applications into micro-frontends or modular components.
• Identifying security vulnerabilities and performance bottlenecks in outdated libraries.
• Creating a roadmap for migrating from jQuery or AngularJS to modern standards.

Key capabilities

• Scans current code structure to detect deprecated patterns and anti-patterns.
• Generates prioritized lists of refactoring tasks based on impact and risk.
• Proposes specific tooling and libraries suitable for the target environment.
• Outputs actionable implementation plans including testing strategies.

Example prompts

• "Analyze my current React codebase and create a plan to migrate to Next.js 14 with minimal feature disruption."
• "Identify all instances of jQuery in this project and suggest a step-by-step refactor to vanilla JavaScript or Alpine.js."
• "Generate a refactoring roadmap for our AngularJS application, focusing on separating business logic from the view layer."

Tips & gotchas

Ensure you provide access to your repository or paste relevant code snippets, as the planner relies on analyzing actual implementation details. While it offers strategic guidance, always review its suggestions against your team's specific constraints before executing changes in production.