Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.
Target users include frontend developers working on the Dify platform who need to optimize complex React components before testing or deployment. It is particularly useful when automated complexity metrics indicate potential refactoring needs or when a developer requests code splitting, hook extraction, or general complexity reduction. The skill is not intended for simple, well-structured components, third-party wrappers, or situations where testing without refactoring is explicitly desired. By following the prescribed patterns, developers can achieve more maintainable codebases, reduce technical debt, and ensure higher quality in component design.
Use this skill when `pnpm analyze-component --json` shows a complexity score above 50, a line count over 300, or when refactoring is suggested before testing. It is also appropriate when users request code splitting or hook extraction.
No, it is intended for high-complexity components. Avoid using it on simple, well-structured components or third-party wrapper components.
Custom hooks should be placed in a `hooks/` subdirectory within the component or alongside the component file, typically named `use-<feature>.ts`.
The skill generates refactoring prompts and provides guidance, but developers must implement the changes manually according to the suggested patterns.
It relies on `complexity`, `maxComplexity`, and `lineCount` from `pnpm analyze-component --json`. Target values are complexity below 50 and line count below 300.
Quick Setup:
.claude/skills/Repository
langgenius/dify