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.
72
88%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is an excellent skill description that clearly defines its scope, triggers, and boundaries. It provides specific concrete actions, measurable thresholds for activation, natural trigger terms, and explicit exclusion criteria. The inclusion of both positive triggers and negative avoidance conditions makes it particularly effective for skill selection among many options.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: refactoring high-complexity React components, code splitting, hook extraction, complexity reduction. Also specifies concrete thresholds (complexity > 50, lineCount > 300) and specific tooling (pnpm analyze-component). | 3 / 3 |
Completeness | Clearly answers both 'what' (refactor high-complexity React components in Dify frontend) and 'when' (explicit triggers including tool output thresholds, user requests, and tool warnings). Also includes explicit 'avoid' guidance for when NOT to use the skill. | 3 / 3 |
Trigger Term Quality | Includes highly natural trigger terms users would say: 'code splitting', 'hook extraction', 'complexity reduction', 'refactor', plus specific tool commands like 'pnpm analyze-component'. Also includes negative triggers ('avoid for') which help prevent false matches. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a clear niche: specifically targets Dify frontend React components with high complexity scores. The specific tool commands, thresholds, and explicit exclusions (simple components, third-party wrappers, testing-only requests) make it very unlikely to conflict with other skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a strong, actionable skill with excellent workflow clarity and concrete, project-specific guidance. The before/after code examples and explicit validation loops are particularly well done. The main weakness is that the document is quite long and could benefit from splitting detailed patterns into referenced sub-files, and some sections could be tightened without losing clarity.
Suggestions
Consider splitting the 6 core refactoring patterns into a separate PATTERNS.md file, keeping only a summary table with links in the main SKILL.md to improve progressive disclosure and reduce document length.
Tighten the Dify-Specific Refactoring Guidelines section by removing the directory tree example for workflow nodes (which duplicates what the codebase already shows) and consolidating the 4 subsections into a compact reference table.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is fairly long (~300 lines) and includes some patterns that could be more concise (e.g., the before/after examples are thorough but verbose). However, most content is project-specific conventions and patterns that Claude wouldn't inherently know, so the verbosity is partially justified. Some sections like 'Common Mistakes to Avoid' add value but could be tighter. | 2 / 3 |
Actionability | The skill provides fully executable commands (pnpm refactor-component, pnpm analyze-component), concrete TypeScript code examples with before/after patterns, specific file paths in the Dify codebase, and clear metric thresholds. The code examples are complete and copy-paste ready. | 3 / 3 |
Workflow Clarity | The 5-step workflow is clearly sequenced with explicit validation checkpoints: each extraction step includes lint, type-check, and test verification with a clear pass/fail feedback loop. The ASCII diagram makes the incremental extraction cycle unambiguous. Step 5 includes verification with target metrics. | 3 / 3 |
Progressive Disclosure | The content is well-structured with clear sections and a quick reference at the top, but it's a monolithic document that could benefit from splitting detailed patterns into separate files. Six refactoring patterns plus Dify-specific guidelines plus workflow steps all inline makes this quite long. References to related skills and codebase examples are present but the core content is all in one file. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- langgenius/dify
- Commit
9cdeffd
- Reviewed
Table of Contents
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.