component-refactoring

Name: component-refactoring
Availability: InStock
Author: sangrokjung

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

Ready to run

npx skills add https://github.com/sangrokjung/claude-code-config-public --skill component-refactoring-sangrokjung

💬 Prompt for ChatGPT / Claude Chat▼

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.