Skills
.Work. You
Rest

frontend-refactor-planner

Community

Refactor UI code safely

Software Engineering#accessibility#refactoring#frontend#performance optimization#ui code#component splitting
Authorzinohome
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill tackles the challenges of refactoring complex, "legacy", or "messy" frontend UI code by providing a structured and safe approach to improvements.

Core Features & Use Cases

  • Component Splitting: Breaks down large components into smaller, manageable, and testable units.
  • State Management Simplification: Identifies and resolves issues like prop drilling and consolidates state logic.
  • Performance Optimization: Suggests and implements strategies like memoization and code splitting.
  • Accessibility Improvements: Audits and enhances UI for better accessibility compliance.
  • Phased Refactoring: Offers a step-by-step plan with risk assessment and clear "done" criteria.
  • Use Case: When faced with a 500-line React component that is difficult to maintain and test, use this Skill to generate a plan to split it into logical, smaller components, improve its performance, and ensure accessibility.

Quick Start

Use the frontend-refactor-planner skill to create a safe refactor plan for the messy UI code in the 'UserProfileCard' component.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: frontend-refactor-planner
Download link: https://github.com/zinohome/CozyChat/archive/main.zip#frontend-refactor-planner

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.