frontend-refactor-planner
Phased planning for refactoring messy frontend codebases.
Install
mkdir -p .claude/skills/frontend-refactor-planner && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14213" && unzip -o skill.zip -d .claude/skills/frontend-refactor-planner && rm skill.zipInstalls to .claude/skills/frontend-refactor-planner
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Creates safe refactor plans for messy UI code including component splitting strategies, state simplification, performance optimizations, and accessibility improvements. Provides phased approach, risk assessment, and "done" criteria. Use when refactoring "legacy code", "messy components", "performance issues", or "large files".Key capabilities
- →Identify issues in frontend code like large components or prop drilling
- →Prioritize refactoring by risk and impact
- →Split large components into smaller sub-components
- →Optimize performance using techniques like memoization and code splitting
- →Improve accessibility by adding ARIA labels and semantic HTML
How it works
The skill assesses frontend code for issues, prioritizes them, and then creates a phased refactor plan using common patterns like component splitting, state management, and performance optimization.
Inputs & outputs
When to use frontend-refactor-planner
- →Refactoring legacy components
- →Splitting large React files
- →Improving accessibility scores
- →Simplifying global state management
About this skill
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.
When not to use it
- →When the codebase is small and does not have complex frontend issues
- →When the focus is on adding new features rather than improving existing code
- →When there is no need for performance optimization or accessibility improvements
Limitations
- →The skill focuses on frontend UI code, not backend logic
- →Refactor assessment identifies issues like components over 300 lines
- →Done criteria include code coverage >80% and accessibility score 95+
How it compares
This skill provides a structured, phased approach to frontend refactoring with risk mitigation and clear done criteria, unlike ad-hoc refactoring that may introduce new issues.
Compared to similar skills
frontend-refactor-planner side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-refactor-planner (this skill) | 0 | 6mo | No flags | Advanced |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| react-modernization | 21 | 2mo | No flags | Advanced |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by lichunboa
View all by lichunboa →You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
react-modernization
wshobson
Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
rendering-animate-svg
TheOrcDev
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
nextjs-app-router-patterns
wshobson
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
writing-react-effects
dust-tt
Writes React components without unnecessary useEffect. Use when creating/reviewing React components, refactoring effects, or when code uses useEffect to transform data or handle events.