skills.rest
yangmiok
yangmiokCOMMUNITY
Explore all skills by this author →
GitHub

component-refactoring

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

Updated Jan 7, 2026
Search Tags:#React#frontend#hooks#refactor#code-splitting#component-refactoring
One-click install
npx skills add https://github.com/yangmiok/newdify --skill component-refactoring-yangmiok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-refactoring
Source: https://github.com/yangmiok/newdify/tree/main/.claude/skills/component-refactoring
Command: npx skills add https://github.com/yangmiok/newdify --skill component-refactoring-yangmiok

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Refactor high-complexity React components in the Dify frontend to improve maintainability and testability.

Core Features & Use Cases

  • Identify components that exceed complexity thresholds (e.g., pnpm analyze-component --json reports complexity > 50 or lineCount > 300).
  • Apply refactoring patterns such as extracting custom hooks, splitting sub-components, and modularizing API/data logic to reduce cognitive load.
  • Provide a structured, incremental workflow to safely refactor before testing, with guidance on when to avoid refactoring (e.g., simple components, third-party wrappers, or explicit testing without refactoring).

Quick Start

From the repository root, run pnpm refactor-component <path-to-component> to generate a tailored refactoring prompt and start the plan.

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 to improve maintainability?▼

Refactor high-complexity React components by extracting custom hooks, splitting sub-components, and modularizing API logic. This structured workflow reduces cognitive load and improves testability for components exceeding complexity or line count thresholds.

When should I extract hooks and split code in a React component?▼

Extract hooks and split code when pnpm analyze-component reports complexity above 50 or lineCount above 300. These thresholds indicate high cognitive load, signaling that modularizing API logic and sub-components is necessary before testing.

What is the best way to start refactoring a React component in the Dify frontend?▼

Start refactoring by running pnpm refactor-component <path-to-component> from the repository root. This generates a tailored refactoring prompt and initiates an incremental plan to safely extract hooks and sub-components aligned with Dify conventions.

Does this React refactoring workflow apply to simple components or third-party wrappers?▼

No, this React refactoring workflow does not apply to simple components or third-party wrappers. It specifically targets high-complexity components and advises against refactoring when explicit testing without refactoring is requested.

Why does my React component analysis warn me to refactor before testing?▼

React component analysis warns to refactor before testing when complexity exceeds safe thresholds. High complexity hinders testability, requiring you to extract custom hooks and split sub-components first to reduce cognitive load and enable effective tests.

Related Skills

Explore More Software Engineering Skills→
langgeniuslanggenius
151.8k

component-refactoring

Refactor high-complexity React components in the Dify frontend.

Official
Advanced
kurokeitakurokeita
1

component-refactoring

Automate structured refactoring of complex React components with staged plans.

Community
Advanced
langflow-ailangflow-ai
153.0k

component-refactoring

Refactor high-complexity Langflow React components into modular units.

Official
Advanced
ViewableGravyViewableGravy

react_comment-structure

Enforce standardized comment section ordering in React components and hooks.

Community
Basic