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 numeric thresholds for activation, natural language trigger terms, and explicit exclusion criteria to prevent false matches. The description is concise yet comprehensive, covering what the skill does, when to use it, and when to avoid it.
| 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 when' guidance, which goes beyond the minimum requirements. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say: 'code splitting', 'hook extraction', 'complexity reduction', 'refactor', 'React components', 'Dify frontend', plus tool-specific triggers like 'pnpm analyze-component'. Also includes negative triggers (avoid clauses) which help prevent false matches. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive: scoped to a specific project (Dify frontend), specific technology (React), specific activity (refactoring high-complexity components), with concrete numeric thresholds and explicit exclusion criteria. 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 well done. The main weakness is that the document is quite long and could benefit from splitting detailed pattern descriptions into separate referenced files, and some sections could be tightened for conciseness.
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 explanatory framing ('When: Refactoring workflow node components') and presenting conventions more directly as reference tables.
| 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 guidance is copy-paste ready and specific to the project. | 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. Step 5 provides concrete verification commands and target metrics. The incremental extraction flowchart makes the feedback loop explicit. | 3 / 3 |
Progressive Disclosure | The skill references related files (frontend-testing skill, web/docs/test.md) and Dify codebase examples, but all content is inline in a single large file. The six refactoring patterns, Dify-specific guidelines, and workflow could benefit from being split into separate referenced files. However, no bundle files are provided, so this is evaluated as a standalone document that is reasonably well-organized with clear section headers. | 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
f19702f
- 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.