frontend-code-review
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
Install with Tessl CLI
npx tessl i github:langgenius/dify --skill frontend-code-reviewOverall
score
77%
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/skillEvaluation — 100%
↑ 1.92xAgent success when using this skill
Validation for skill structure
Discovery
50%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
The description establishes a clear trigger condition and identifies the file types it handles, but lacks specificity about what the review actually entails or what 'checklist rules' means. It would benefit from concrete actions and more natural trigger terms that users would actually say when requesting frontend code reviews.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Reviews component structure, validates prop types, checks accessibility compliance, identifies performance issues'
Include more natural trigger terms users would say: 'React', 'component review', 'code review', 'PR feedback', 'frontend code'
Clarify what 'checklist rules' means by listing key review criteria or linking to the specific standards being applied
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (frontend files) and mentions two types of reviews (pending-change reviews, focused file reviews) with checklist rules, but doesn't list specific concrete actions like 'check accessibility', 'validate prop types', or 'review component structure'. | 2 / 3 |
Completeness | Has a 'Trigger when' clause which addresses when to use it, but the 'what' is vague - 'applying checklist rules' doesn't explain what the skill actually does or what outcomes it produces. | 2 / 3 |
Trigger Term Quality | Includes file extensions (.tsx, .ts, .js) which are useful triggers, but misses common natural language terms users might say like 'React', 'component', 'code review', 'PR review', or 'frontend code'. | 2 / 3 |
Distinctiveness Conflict Risk | The focus on frontend files (.tsx, .ts, .js) provides some distinction, but 'review' is generic and could conflict with general code review skills; the specific file types help but aren't sufficient to clearly differentiate. | 2 / 3 |
Total | 8 / 12 Passed |
Implementation
85%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured skill with excellent progressive disclosure and clear workflow. The output templates are specific and the process is well-sequenced. The main weakness is that actionability depends heavily on external reference files, and the review process steps could benefit from concrete examples of what to look for.
Suggestions
Add 1-2 concrete examples of checklist violations with code snippets directly in the skill to make the review process more actionable without requiring reference file lookup
Clarify what 'urgency metadata' means and how to determine if an issue is 'urgent' vs a 'suggestion' - provide specific criteria or examples
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is lean and efficient, avoiding explanations of concepts Claude already knows. Every section serves a clear purpose with no padding or unnecessary context about what frontend code review is. | 3 / 3 |
Actionability | The skill provides clear templates and a process outline, but the actual checklist rules are delegated to external reference files. The review process steps are somewhat abstract ('gather lines that relate to...') rather than providing concrete examples of what violations look like. | 2 / 3 |
Workflow Clarity | The 3-step review process is clearly sequenced with explicit ordering (urgent first, then by category). The output templates provide clear structure, and the follow-up question creates a feedback loop for applying fixes. | 3 / 3 |
Progressive Disclosure | Excellent structure with the main skill file providing overview and process, while detailed checklists are appropriately split into one-level-deep reference files (code-quality.md, performance.md, business-logic.md) with clear navigation. | 3 / 3 |
Total | 11 / 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.
- 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.