skills.rest
lildibbb
lildibbbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-refactoring

Refactor high-complexity React components by extracting custom hooks and splitting components.

Updated Feb 24, 2026
Search Tags:#refactoring#react#performance optimization#complexity analysis#code maintainability
One-click install
npx skills add https://github.com/lildibbb/tele-crm-frontend --skill component-refactoring-lildibbb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-refactoring
Source: https://github.com/lildibbb/tele-crm-frontend/tree/main/.agents/skills/component-refactoring
Command: npx skills add https://github.com/lildibbb/tele-crm-frontend --skill component-refactoring-lildibbb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pnpm, analyze-component, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of refactoring high-complexity React components, ensuring they are maintainable, efficient, and scalable.

Core Features & Use Cases

  • Complexity Analysis: Identifies components exceeding complexity thresholds, such as those with >50 complexity or lineCount >300.
  • Refactoring Patterns: Applies best practices for extracting custom hooks, splitting components, simplifying conditional logic, and managing modals and forms.
  • Use Cases: Ideal for developers aiming to improve the structure and performance of complex components in the Dify frontend.

Quick Start

Run the refactor-component command with the path to the component you want to optimize.

Frequently Asked Questions about component-refactoring

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I refactor complex React components to improve maintainability?▼

Refactoring complex React components involves extracting custom hooks, splitting components, and simplifying conditional logic. This skill automates applying predefined patterns and best practices to optimize performance.

When do I need to refactor a React component for performance optimization?▼

You need to refactor React components for performance optimization when they exceed complexity thresholds, such as a complexity score over 50 or a line count exceeding 300 lines, indicating poor maintainability.

What is the best way to extract custom hooks from a large React component?▼

The best way to extract custom hooks from large React components is to automate the extraction using predefined refactoring patterns. This separates logic efficiently while maintaining core functionality and improving maintainability.

Do I need pnpm to run the React component refactoring process?▼

Yes, you need pnpm installed to run the React component refactoring process. The workflow requires pnpm and the analyze-component tool to access the codebase and execute the refactor-component command.

How do I analyze component complexity before starting a React refactoring task?▼

You analyze component complexity by running the analyze-component tool to identify components exceeding specific thresholds. This targets components with a complexity score over 50 or lineCount over 300 for refactoring.

Related Skills

Explore More Software Engineering Skills→
kurokeitakurokeita
1

component-refactoring

Automate structured refactoring of complex React components with staged plans.

Community
Advanced
vndeevndee
3

react-refactor

Write characterization tests for React components before incremental refactoring.

Community
Advanced
mangorocketofficialmangorocketofficial

component-refactoring

Refactor high-complexity React components by extracting custom hooks and splitting sub-components.

Community
Intermediate
padjeipadjei

design-systems-slds-validate

Validate Lightning Web Components for SLDS compliance and generate a detailed scorecard.

Community
Advanced