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.
73
58%
Does it follow best practices?
Impact
100%
1.92xAverage score across 3 eval scenarios
Risky
Do not use without reviewing
Optimize this skill with Tessl
npx tessl skill review --optimize ./.agents/skills/frontend-code-review/SKILL.mdQuality
Discovery
67%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 adequately communicates when to trigger and provides a reasonable scope (frontend file review), but lacks specificity about what concrete actions the review entails. The trigger terms cover file extensions but miss common natural language variations users would employ. The 'checklist rules' reference is vague and could benefit from elaboration.
Suggestions
List specific review actions performed, e.g., 'Checks accessibility, component structure, state management patterns, and naming conventions in frontend files.'
Add more natural trigger terms users would say, such as 'code review', 'PR review', 'check my React code', 'review my component', or 'frontend lint'.
Clarify what 'checklist rules' refers to, or remove the vague reference in favor of concrete criteria the skill evaluates.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | It names the domain (frontend file review) and mentions two modes ('pending-change reviews' and 'focused file reviews') plus 'checklist rules', but doesn't list specific concrete actions like checking accessibility, performance patterns, or naming conventions. | 2 / 3 |
Completeness | Explicitly answers both 'what' (review frontend files, support pending-change and focused file reviews with checklist rules) and 'when' ('Trigger when the user requests a review of frontend files') with clear trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes relevant file extensions (.tsx, .ts, .js) and the term 'review', but misses common natural user phrases like 'code review', 'PR review', 'check my code', 'lint', or 'React' which users would naturally say. | 2 / 3 |
Distinctiveness Conflict Risk | Scoped to frontend files which helps, but 'review' is broad and could overlap with general code review skills, backend review skills, or linting tools. The mention of 'checklist rules' is distinctive but unexplained. | 2 / 3 |
Total | 9 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides a well-structured code review framework with clear output templates and appropriate delegation to external checklist files. Its main weaknesses are the lack of concrete examples showing what violations look like, the absence of validation/verification steps in the workflow, and the inability to verify referenced bundle files. The output formatting requirements are a strength, giving Claude unambiguous guidance on response structure.
Suggestions
Add 1-2 concrete examples of checklist violations with before/after code snippets so Claude knows exactly what to flag (e.g., an unmemoized prop example paired with the expected review output).
Add a verification step to the review process, such as 'Confirm all applicable checklist categories have been checked before composing the output' to ensure completeness.
Include a brief inline summary of the most critical checklist rules from the referenced files so the skill is partially functional even if references fail to load.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient but includes some unnecessary explanation (e.g., the Intent section restates what the trigger description already covers). The output templates are appropriately detailed since they define exact formatting, but some phrasing could be tightened. | 2 / 3 |
Actionability | The review process steps are concrete but somewhat abstract—they describe what to do conceptually ('gather lines that relate to class names, React Flow hooks') without providing executable commands or specific code examples. The output templates are well-defined and copy-paste ready, which is a strength, but the actual review methodology lacks concrete examples of what a violation looks like or how to detect one. | 2 / 3 |
Workflow Clarity | The 3-step review process provides a clear sequence, but there are no validation checkpoints or feedback loops. For a code review workflow, there's no step to verify completeness (e.g., confirming all checklist rules were checked) or to handle edge cases like files that don't match any checklist category. The conditional logic for Template A vs B is clear, however. | 2 / 3 |
Progressive Disclosure | The skill correctly references three external checklist files (code-quality.md, performance.md, business-logic.md) as one-level-deep references, which is good structure. However, no bundle files were provided, so we cannot verify these references exist. The SKILL.md itself inlines the full output templates which is appropriate, but the checklist content is entirely delegated to external files with no summary of key rules, making the skill somewhat opaque without those files. | 2 / 3 |
Total | 8 / 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.
3708e3e
Table of Contents
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.