Agent skill · software engineering · aiskillstore
component-refactoring
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.
Why this skill is useful
Provides specific refactoring patterns and commands for managing complex React components that the AI wouldn't reliably generate on its own.
What it needs
Requires pnpm installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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. Complexity Analysis Complexity Score Interpretation Score Level Action ------- ------- -------- 0-25 🟢 Simple Ready for testing 26-50 🟡 Medium Consider minor refactoring 51-75 🟠 Complex Refactor before testing 76-100 🔴 Very Complex Must refactor Core Refactoring Patterns Pattern 1: Extract Custom Hooks When: Component has complex state management, multiple useState/useEffect, or business logic mixed with UI. Dify Convention: Place hooks in a hooks/ subdirectory or alongside the component as use-<feature>.ts. Dify Examples: web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts web/app/components/app/configuration/debug/hooks.tsx web/app/components/workflow/hooks/use-workflow.ts Pattern 2: Extract Sub-Components When: Single component has multiple UI sections, conditional rendering blocks, or repeated patterns. Dify Convention: Place sub-components in subdirectories or as separate files in the same directory. Dify Examples: web/app/components/app/configuration/ directory structure web/app/components/workflow/nodes/ per-node organization Pattern 3: Simplify Conditional Logic When: Deep nesting (> 3 levels), complex ternaries, or multiple if/else chains. Pattern 4: Extract API/Data Logic When: Component directly handles API calls, data transformation, or complex async operations. Dify Convention: Use @tanstack/react-query hooks from web/service/use-.ts or create custom data hooks. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/component-refactoring