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.

Install with Tessl CLI

npx tessl i github:langgenius/dify --skill component-refactoring

What are skills?

Overall
score

88%

Review — 89%

Does it follow best practices?

If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:

npx tessl skill review --optimize ./path/to/skill

Learn more

Evaluation — 90%

↑ 1.27x

Agent success when using this skill

Validation — 14 / 16 Passed

Validation for skill structure

SKILL.md

Review

Evals

Evaluation results

94%

44%

Refactor MCP Server Component to Use Service Hook

React Query data hook patterns

Criteria

Without context

With context

NAME_SPACE constant

100%

queryKeys object

100%

useQuery import

100%

enabled option

100%

select transform

100%

useInvalidXxx export

50%

100%

get from service/base

100%

Hook naming convention

100%

Kebab-case file name

100%

Component uses hook

100%

Return/Params type suffixes

Without context: $0.4288 · 1m 43s · 16 turns · 70 in / 6,485 out tokens

With context: $1.2179 · 3m 42s · 36 turns · 34 in / 15,355 out tokens

85%

Simplify Complex Conditional Logic in Config Panel

Conditional logic simplification

Criteria

Without context

With context

Lookup table for template selection

100%

Lookup defined outside component

100%

No nested switch-inside-if for template

100%

Chained ternary replaced

100%

Named getter function

100%

Named boolean predicate

33%

Early returns used

100%

Reduced nesting depth

100%

Complex boolean extracted

30%

Lookup table access pattern

100%

Without context: $0.1895 · 56s · 8 turns · 9 in / 2,584 out tokens

With context: $0.5301 · 1m 53s · 21 turns · 264 in / 6,181 out tokens

90%

Split Monolithic App Info Component

Modal management and component splitting

Criteria

Without context

With context

ModalType union type

67%

100%

Single activeModal state

100%

openModal and closeModal callbacks

100%

isOpen helper

100%

useCallback for modal handlers

100%

Modal hook in separate file

100%

Sub-component files created

100%

Index acts as orchestrator

80%

100%

Minimal props to sub-components

20%

No multiple boolean modal states

100%

Without context: $0.3196 · 1m 35s · 13 turns · 14 in / 4,146 out tokens

With context: $0.8494 · 2m 36s · 29 turns · 28 in / 10,403 out tokens

Evaluated: about 13 hours ago
Agent: Claude Code

Table of Contents

Refactor MCP Server Component to Use Service Hook Simplify Complex Conditional Logic in Config Panel Split Monolithic App Info Component

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.