component-refactoring

Item: component-refactoring
Rating: 5.8
Author: Implexa

Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user…

view source

installs

stars

karma

SkillRank score ↗

5.8/ 10

evaluated by implexa, claude-haiku-4-5 · 2026-06-23

guides refactoring of complex react components in dify frontend when complexity metrics exceed 50. covers measurement, command syntax, and basic workflow but lacks complete decision trees and failure handling.

structure

4.0

trigger phrases

7.0

procedure

5.0

edge cases

3.0

documentation

6.0

strengths

SKILL.md

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>

related skills

semantically similar in the cross-vendor index

skills.sh

63% match

react-refactor

Architectural refactoring guide for React applications covering component architecture, state architecture, hook patterns, component decomposition, coupling…

don't have the plugin yet? install it then click "run inline in claude" again.