web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Focuses on visual design and interaction patterns. Do NOT use for performance audits (use core-web-vitals), SEO (use seo), or comprehensive site audits (use web-quality-audit).
79
73%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./packages/skills-catalog/skills/(design)/web-design-guidelines/SKILL.mdQuality
Discovery
89%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 a strong skill description that excels in completeness and distinctiveness. The explicit 'Use when' clause with natural trigger phrases and the 'Do NOT use' boundaries with alternative skill references make it highly effective for skill selection. The main weakness is that the specific capabilities could be more granular — listing concrete review actions rather than the broad 'visual design and interaction patterns' would improve specificity.
Suggestions
Add specific concrete actions like 'checks color contrast ratios, validates semantic HTML usage, reviews keyboard navigation patterns, audits ARIA attributes' to improve specificity.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | It names the domain (UI code review for Web Interface Guidelines compliance) and mentions 'visual design and interaction patterns' but doesn't list multiple specific concrete actions like 'check color contrast, validate ARIA labels, review layout hierarchy'. | 2 / 3 |
Completeness | Clearly answers both what (review UI code for Web Interface Guidelines compliance, focusing on visual design and interaction patterns) and when (explicit 'Use when' clause with multiple trigger phrases), plus includes helpful negative boundaries for disambiguation. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms: 'review my UI', 'check accessibility', 'audit design', 'review UX', 'check my site against best practices' — these are phrases users would naturally say. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with explicit negative boundaries ('Do NOT use for performance audits, SEO, or comprehensive site audits') and references to specific alternative skills, making it very unlikely to conflict with related skills. | 3 / 3 |
Total | 11 / 12 Passed |
Implementation
57%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill has good structural organization with appropriate delegation to a reference file, but suffers from internal redundancy (the workflow is stated twice) and lacks concrete examples of expected output or actionable review patterns. It relies entirely on the external guideline.md for substance, making the SKILL.md itself more of a thin wrapper than a standalone actionable guide.
Suggestions
Remove the duplicate workflow — consolidate 'How It Works' and 'Usage' into a single section to eliminate redundancy.
Add a concrete example showing a sample finding in the expected output format (e.g., 'src/Button.tsx:42 — missing focus-visible outline') so Claude has an unambiguous model to follow.
Add a brief validation step: e.g., 'If guidelines file cannot be read, inform the user and stop' to handle edge cases in the workflow.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content has some redundancy — the 'How It Works' and 'Usage' sections largely repeat the same 4-step process. The bullet list under 'Guidelines Reference' summarizes what's in the referenced file, which is somewhat useful for orientation but adds tokens for content Claude will read from the file anyway. | 2 / 3 |
Actionability | The skill delegates all concrete rules and output format to the referenced guideline.md file, so the SKILL.md itself contains no executable code, specific examples of findings, or concrete review patterns. It describes the process but doesn't show what a review output looks like or give a concrete example. | 2 / 3 |
Workflow Clarity | The steps are listed clearly and the sequence is logical, but there's no validation checkpoint — e.g., no step to verify the guidelines file was loaded successfully, no guidance on what to do if a file can't be parsed, and no feedback loop for ambiguous findings. The workflow is also stated twice redundantly. | 2 / 3 |
Progressive Disclosure | The skill appropriately keeps itself as a concise overview and delegates all detailed rules to a single referenced file (references/guideline.md). The reference is clearly signaled and one level deep, which is good progressive disclosure structure. | 3 / 3 |
Total | 9 / 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
- tech-leads-club/agent-skills
- Commit
81e7e0d
- 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.