AgentSkillsCN

component-refactoring

适用于 React 组件过于庞大或复杂，需要进行拆分、简化，或实现关注点分离的场景。

SKILL.md
--- frontmatter
name: component-refactoring
description: Use when React components are too large or complex and need extraction, simplification, or separation of concerns.

Component Refactoring Skill

Refactor high-complexity React components with the patterns and workflow below.

Complexity Threshold: Components with lineCount > 300 should be considered for refactoring.

Core Refactoring Patterns

  • •Pattern 1: Extract Custom Hooks (for complex state/business logic)
  • •Pattern 2: Extract Sub-Components (for monolithic JSX)
  • •Pattern 3: Simplify Conditional Logic (for deep nesting/complex ternaries)
  • •Pattern 4: Extract API/Data Logic (use @tanstack/react-query or similar hooks)
  • •Pattern 5: Extract Modal/Dialog Management (isolated open/close states)

Refactoring Workflow

  1. •Analyze Component (Check file size and search for long functions/JSX blocks)
  2. •Plan Refactoring based on identified patterns.
  3. •Execute Incrementally (extract logic/JSX into new files, verify lint and type-checks)
  4. •Verify that the component is now more readable and maintainable.