skills.rest
sangrokjung
sangrokjungCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-refactoring

Refactors high-complexity React components in the Dify frontend codebase.

1|Updated Feb 7, 2026
Search Tags:#code quality#refactoring#react#technical debt#frontend development#component design
One-click install
npx skills add https://github.com/sangrokjung/claude-code-config-public --skill component-refactoring-sangrokjung
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-refactoring
Source: https://github.com/sangrokjung/claude-code-config-public/tree/main/skills/component-refactoring
Command: npx skills add https://github.com/sangrokjung/claude-code-config-public --skill component-refactoring-sangrokjung

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of maintaining and improving large, complex React components by providing a structured approach to refactoring, reducing technical debt, and enhancing code quality.

Core Features & Use Cases

  • Complexity Analysis: Identifies components exceeding complexity or line count thresholds using pnpm analyze-component.
  • Pattern-Based Refactoring: Guides refactoring using established patterns like custom hook extraction, sub-component splitting, and logic simplification.
  • Workflow Guidance: Provides a step-by-step process for planning, executing, and verifying refactoring efforts.
  • Use Case: A developer encounters a React component that is over 500 lines long and has a complexity score of 70. They use this Skill to break it down into smaller, manageable components and extract complex state logic into custom hooks, making the code easier to understand, test, and maintain.

Quick Start

Use the component-refactoring skill to refactor the component located at web/app/components/common/modal/index.tsx.

Frequently Asked Questions about component-refactoring

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

FAQPage Schema
How do I refactor high-complexity React components?▼

Refactor complex React components by analyzing metrics like complexity and line count, then apply patterns such as custom hook extraction and sub-component splitting to reduce technical debt.

What is the best way to break down a React component that is too long?▼

The best way to break down long React components is using pattern-based refactoring, extracting conditional logic into custom hooks and splitting the UI into manageable sub-components for better maintainability.

When should I extract custom hooks during React refactoring?▼

Extract custom hooks during React refactoring when a component's state logic causes high complexity scores, moving the logic out of the component to simplify conditional rendering and improve testability.

Can I analyze React component complexity before refactoring?▼

Yes, you can analyze React component complexity before refactoring by running pnpm analyze-component to identify files exceeding complexity or line count thresholds and guide the refactoring process.

Does this refactoring workflow support incremental execution and verification?▼

Yes, the refactoring workflow supports incremental execution and verification by providing step-by-step guidance for planning, executing, and verifying each refactoring effort to ensure code stability.

Related Skills

Explore More Software Engineering Skills→
kurokeitakurokeita
1

component-refactoring

Automate structured refactoring of complex React components with staged plans.

Community
Advanced
mangorocketofficialmangorocketofficial

component-refactoring

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

Community
Intermediate
qazuorqazuor

react-patterns

Standardize React component design with reusable TypeScript patterns for components, hooks, and composition.

Community
Basic
Sir-chawakornSir-chawakorn
33

refactoring

Refactor codebases using static analysis to ensure behavioral equivalence.

Community
Intermediate