mcpField
F
frontend-refactor-planner

frontend-refactor-planner

github.com/patricio0312revDevelopment63307 installsUpdated 41w ago
Repository

About frontend-refactor-planner

A skill for planning safe, phased refactors of complex frontend code. It helps frontend teams assess risks, prioritize changes, and structure incremental work with testing and rollback considerations.

Key features

  1. 01Assess frontend complexity and risks
  2. 02Prioritize issues by impact and risk
  3. 03Plan small, testable refactor phases
  4. 04Cover performance and accessibility work
  5. 05Include rollout and rollback safeguards

Use cases

  1. 01Breaking up large frontend components
  2. 02Reducing duplicated logic and state complexity
  3. 03Planning accessibility improvements
  4. 04Preparing gradual refactors with tests

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/patricio0312rev/skills --skill frontend-refactor-planner

After installing, type/frontend-refactor-plannerin Claude Code to confirm it loaded.

Details

From the project README

Frontend Refactor Planner

Create safe, phased refactor plans for complex frontend code.

Refactor Assessment

Identify Issues: Large components (>300 lines), prop drilling, duplicate logic, poor performance, accessibility gaps, tight coupling, untested code Prioritize: By risk (high-traffic pages first) and impact (user-facing bugs prioritized) Plan Phases: Break into small, testable increments

Common Refactor Patterns

Component Splitting: Extract sub-components, create compound components, separate logic from presentation State Management: Lift state up, move to Context/Zustand, remove unnecessary state Performance: Memoization (useMemo/useCallback), code splitting, lazy loading, virtualization Accessibility: Add ARIA labels, keyboard navigation, focus management, semantic HTML Testing: Add tests before refactoring, test after each change

Phased Approach

Phase 1 - Stabilize: Add tests, fix critical bugs, document current behavior Phase 2 - Extract: Pull out utilities, create smaller components, reduce complexity Phase 3 - Simplify: Remove dead code, consolidate duplicates, optimize state Phase 4 - Polish: Performance optimization, accessibility audit, documentation

Risk Mitigation

Feature flags for gradual rollout, A/B testing refactored vs original, monitor error rates, have rollback plan, peer review all changes, incremental deployment.

Done Criteria

Code coverage >80%, performance metrics improved, accessibility score 95+, no regressions in tests, code review approved, documentation updated.

Comments

Markdown supported