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.
90
88%
Does it follow best practices?
Impact
Pending
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, names concrete actions (code splitting, hook extraction, complexity reduction), and includes both positive and negative trigger conditions. The description is well-structured, uses third person voice, and would be highly distinguishable from other skills in a large skill library.
| 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 'Use when' clause with multiple trigger conditions). Also includes an 'avoid' clause specifying when NOT to use the skill, 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', 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 task (refactoring high-complexity components), with concrete numeric thresholds and explicit exclusions that minimize overlap with testing or general coding 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, highly actionable skill with excellent workflow clarity and concrete, project-specific guidance. Its main weakness is length — the six refactoring patterns plus four Dify-specific guidelines could be split into referenced files to improve progressive disclosure and reduce token cost. The content is well-organized with good use of tables, code examples, and visual diagrams.
Suggestions
Extract the six core refactoring patterns into a separate PATTERNS.md file and reference it from the main SKILL.md to improve progressive disclosure and reduce token consumption.
Consider trimming the Dify-specific guidelines section (Context Provider, Workflow Nodes, Configuration, Tool/Plugin) into a separate DIFY-CONVENTIONS.md, keeping only brief summaries with links in the main file.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is fairly long (~300 lines) and includes some patterns that could be more concise (e.g., the modal management and form logic patterns are somewhat verbose), but most content is project-specific conventions and concrete examples that earn their place. Some sections like 'Common Mistakes to Avoid' add value but could be tighter. | 2 / 3 |
Actionability | Provides fully executable commands (pnpm refactor-component, pnpm analyze-component), concrete TypeScript before/after code examples for each pattern, 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 refactoring workflow is clearly sequenced with explicit validation checkpoints (lint, type-check, test after each extraction), a visual feedback loop diagram, and verification criteria (complexity < 50, lineCount < 300). The 'FAIL? → Fix before continuing' loop is exactly the kind of error recovery checkpoint the rubric rewards. | 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 pattern descriptions into separate files. The six core patterns plus Dify-specific guidelines make this quite long for a single SKILL.md. References to related skills and codebase examples are present but the main content is all inline. | 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
3708e3e
- 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.