Does this skill support Dify-specific patterns?

Yes, it is explicitly designed to follow Dify conventions for custom hooks, service layers, and workflow node organization.

When should I use the component-refactoring skill?

Use it when a React component exceeds 300 lines of code or has a complexity score higher than 50 as measured by the pnpm analyze-component command.

How do I analyze a component's complexity first?

You can run 'pnpm analyze-component --json' from within the web directory to get a detailed breakdown of metrics like max complexity and line count.

Can it help with testing?

Absolutely. By reducing complexity and extracting logic, it prepares components to be more easily covered by unit and integration tests.

Dify React Component Refactorer

Name: Dify React Component Refactorer
Author: yangmiok

byyangmiok

设计工具

Refactors high-complexity React components into maintainable, modular units using automated complexity analysis and standardized design patterns.

关于

The Dify Component Refactoring skill is a specialized toolset for Claude Code designed to manage technical debt in large-scale React applications. It utilizes specific commands like `pnpm analyze-component` to detect components exceeding maintenance thresholds—such as 300 lines of code or a 50+ complexity score—and guides the AI through systematic refactoring. By applying proven patterns like custom hook extraction, sub-component splitting, and React Query integration, it transforms monolithic files into clean, testable, and Dify-standardized codebases.

主要功能

Systematic extraction of complex state logic into custom hooks
0 GitHub stars
Standardized API logic refactoring using React Query patterns
Automated complexity and line count analysis for React components
Simplification of deeply nested conditional logic and lookup tables
Intelligent splitting of monolithic JSX into focused sub-components

使用场景

Breaking down massive React components before implementing unit tests
Reducing cognitive load and maintenance costs for business-critical UI logic
Standardizing frontend architecture across a team using Dify-specific patterns

关于

主要功能

Systematic extraction of complex state logic into custom hooks
0 GitHub stars
Standardized API logic refactoring using React Query patterns
Automated complexity and line count analysis for React components
Simplification of deeply nested conditional logic and lookup tables
Intelligent splitting of monolithic JSX into focused sub-components

使用场景

Breaking down massive React components before implementing unit tests
Reducing cognitive load and maintenance costs for business-critical UI logic
Standardizing frontend architecture across a team using Dify-specific patterns