component-refactoring_skill

Overview

This skill refactors high-complexity React components in the Dify frontend to reduce cognitive load, improve testability, and enforce repository conventions. It targets components flagged by pnpm analyze-component when complexity > 50 or lineCount > 300 and provides concrete extraction patterns and a safe incremental workflow. Use it to produce cleaner hooks, smaller sub-components, and clearer data and modal boundaries while preserving existing conventions.

How this skill works

The skill analyzes a component's metrics and detected features (state, effects, API calls, large JSX blocks, modal counts) and generates a prioritized refactoring plan. It recommends specific actions: extract custom hooks, split UI into sub-components, move API logic to service hooks, consolidate modal state, or simplify conditional logic. The workflow is incremental: extract one piece, run lint/type-check/tests, then repeat until metrics meet targets.

When to use it

• pnpm analyze-component reports complexity > 50 or lineCount > 300
• You need code splitting, hook extraction, or complexity reduction before testing
• Component mixes business logic (API, transforms) with UI rendering
• Component has many modal states, deep conditional rendering, or repeated UI sections
• Avoid when component is simple, a thin third-party wrapper, or user prefers testing without refactor

Best practices

• Extract cohesive hooks (group related state/logic) and place them in hooks/ or alongside the component
• Split large JSX into focused sub-components within the same directory to keep context local
• Move API calls to service hooks using React Query with NAME_SPACE, enabled, and select patterns
• Consolidate modal states into a single modal management hook with typed modal keys
• Perform one extraction at a time and run lint, type-check, and tests after each step
• Avoid premature abstraction and follow existing directory and naming conventions

Example use cases

• Transform a 600-line configuration component into a container plus useModelConfig and small UI pieces
• Extract API logic from a dashboard card into useAppConfig with React Query to reduce effects in the component
• Replace deeply nested conditional rendering with a lookup map and smaller template components
• Consolidate five modal boolean states into a single useAppInfoModals hook with typed modal keys
• Refactor workflow node files into node.tsx, panel.tsx, use-interactions.ts, and types.ts for clarity