Frontend Refactor Planner

frontend-refactor-planner

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", "perform...

majiayu000/claude-skill-registry·0installs663starsDevOps & CI/CD

SKILL.md

Full skill instructions

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.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/majiayu000/claude-skill-registry --skill frontend-refactor-planner

View on GitHub

skills/data/frontend-refactor-planner/SKILL.md

More DevOps & CI/CD skills

View all

DevOps & CI/CD

google-agents-cli-scaffold

Project scaffolding, deployment configuration, and CI/CD setup for Google ADK agents.

6K 472.6K

View

DevOps & CI/CD

google-agents-cli-observability

Set up tracing, logging, and monitoring for deployed ADK agents across Cloud Trace, BigQuery, and third-party platforms.

6K 472.6K

View

DevOps & CI/CD

azure-enterprise-infra-planner

Enterprise Azure infrastructure architect generating Bicep or Terraform from workload descriptions.

1.5K 454.3K

View

DevOps & CI/CD

azure-kubernetes

Plan and configure production-ready Azure Kubernetes Service clusters with Day-0 and Day-1 best practices.

1.5K 447.1K

View

DevOps & CI/CD

industrial-brutalist-ui

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

92.7K 354.9K

View

DevOps & CI/CD

just-scrape

Web search, scraping, extraction, crawling, and monitoring via ScrapeGraph AI CLI.

69 245K

View

DevOps & CI/CD

firebase-hosting-basics

Skill for working with Firebase Hosting (Classic). Use this when you want to deploy static web apps, Single Page Apps (SPAs), or simple microservices. Do NOT use for Firebase App Hosting.

462 159.7K

View

DevOps & CI/CD

firebase-app-hosting-basics

Deploy and manage web apps with Firebase App Hosting. Use this skill when deploying Next.js/Angular apps with backends.

462 159.1K

View

DevOps & CI/CD

deploy-to-vercel

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

31.9K 146.6K

View

DevOps & CI/CD

programmatic-seo

Build SEO-optimized pages at scale using templates, data, and proven playbook patterns.

53.3K 140.1K

View

DevOps & CI/CD

convex-create-component

Design and build isolated, reusable Convex backend components with clear boundaries and app-facing wrappers.

63 123.5K

View

DevOps & CI/CD

vercel-cli-with-tokens

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".

31.9K 116.1K

View