component-refactoring

SKILL.md

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>