skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

component-refactoring

Refactor high-complexity React components in the Dify frontend.

152k|24.0k|Updated Apr 12, 2023
Search Tags:#frontend#react#complexity#refactor#hook#code-splitting
One-click install
npx skills add https://github.com/langgenius/dify --skill component-refactoring
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-refactoring
Source: https://github.com/langgenius/dify/tree/main/.claude/skills/component-refactoring
Command: npx skills add https://github.com/langgenius/dify --skill component-refactoring

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Refactor high-complexity React components in the Dify frontend to improve maintainability, testability, and scalability. Triggered when static analysis reports complexity > 50 or large line counts, or when users request code-splitting or hook extraction.

Core Features & Use Cases

  • Complexity-driven refactoring: Extract hooks, split components, and restructure large files.
  • Workflow guidance: Provides a clear pattern library and steps to implement refactors.
  • Quality outcomes: Yields more maintainable code and easier future testing.

Quick Start

cd web pnpm refactor-component <path>

Frequently Asked Questions about component-refactoring

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

FAQPage Schema
How do I reduce cognitive complexity in React components?▼

Reduce cognitive complexity by extracting custom hooks, splitting large components into smaller sub-components, and isolating API/data logic. The refactor-component workflow automates this process for React components in the Dify frontend when complexity metrics exceed safe thresholds.

When should I refactor a React component?▼

Refactor when static analysis reports complexity over 50 or line count exceeding 300, when you need code splitting or hook extraction, or when analysis warns refactoring is needed before testing. Run pnpm analyze-component to check your component's metrics.

How do I split a large React component into smaller pieces?▼

Use the refactor-component workflow to extract hooks, sub-components, and data logic following Core Refactoring Patterns. Run cd web && pnpm refactor-component <path> to guide the splitting process and maintain aligned file structures.

Can I refactor components outside the web/ directory?▼

The refactor-component tool targets components under web/ (e.g., web/app/components/...). Apply the Core Refactoring Patterns manually for components in other locations, or adjust your component path to the web/ structure.

What's the difference between extracting hooks and splitting components?▼

Hook extraction isolates stateful logic and side effects into reusable custom hooks, while component splitting breaks a large component into smaller, focused sub-components. Both reduce cognitive complexity; use extraction for shared logic and splitting for rendering-heavy components.

Related Skills

Explore More Software Engineering Skills→
CuriousLearnerCuriousLearner
27

complexity-analyzer

Measure code complexity metrics and identify high-complexity areas in software projects.

Community
Advanced
arcasilesgrouparcasilesgroup
54

ai-refactor

Refactor existing code to improve internal structure without changing external behavior.

Official
Intermediate
baphledbaphled
1

static-analysis

Guide static code analysis tools to detect bugs, vulnerabilities, and style violations.

Community
Intermediate
SheTieJunSheTieJun
8

code-reviewer

Analyze source code for security, readability, and performance issues with refactoring recommendations.

Community
Basic