Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user…
Refactor high-complexity React components in Dify frontend with structured patterns and incremental extraction. Targets components with complexity > 50 or line count > 300; use pnpm analyze-component --json to measure and pnpm refactor-component to generate refactoring prompts Six core patterns: custom hooks for state/logic, sub-components for UI sections, simplified conditionals, API/data extraction, modal management, and form logic Dify-specific conventions for context providers, workflow nodes, configuration components, and tool-related UI; follows existing directory structures and naming Incremental workflow: extract one piece at a time, lint/type-check/test after each step, verify improvements with re-analysis before moving to next extraction Dify Component Refactoring Skill Refactor high-complexity React components in the Dify frontend codebase with the patterns and workflow below. Complexity Threshold: Components with complexity > 50 (measured by pnpm analyze-component) should be refactored before testing. Quick Reference Commands (run from web/) Use paths relative to web/ (e.g., app/components/...). Use refactor-component for refactoring prompts and analyze-component for testing prompts and metrics. cd web # Generate refactoring prompt pnpm refactor-component <path>
don't have the plugin yet? install it then click "run inline in claude" again.