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

0•

Design Tools

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.

Key Features

01Systematic extraction of complex state logic into custom hooks

020 GitHub stars

03Standardized API logic refactoring using React Query patterns

04Automated complexity and line count analysis for React components

05Simplification of deeply nested conditional logic and lookup tables

06Intelligent splitting of monolithic JSX into focused sub-components

Use Cases

01Breaking down massive React components before implementing unit tests

02Reducing cognitive load and maintenance costs for business-critical UI logic

03Standardizing frontend architecture across a team using Dify-specific patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yangmiok/newdify component-refactoring

For use in Claude.ai and ChatGPT

Download Skill