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".
58
66%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Advisory
Suggest reviewing before use
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/web-design-guidelines/SKILL.mdQuality
Discovery
82%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 is solid in completeness and trigger term coverage, with a clear 'Use when' clause containing multiple natural user phrases. Its main weaknesses are a lack of specific concrete actions (what exactly does the review check?) and moderate overlap risk with other accessibility or design review skills. Adding specific capabilities and narrowing some trigger terms would strengthen it.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Checks color contrast ratios, validates semantic HTML, audits keyboard navigation, reviews responsive design patterns'
Differentiate from potential accessibility-only or general code review skills by emphasizing the specific 'Web Interface Guidelines' framework and what makes it distinct from generic accessibility checks
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | It names the domain (UI code review) and the framework (Web Interface Guidelines compliance), but doesn't list specific concrete actions like 'check color contrast', 'validate ARIA labels', 'audit responsive layouts'. The description stays at a high level of 'review' without detailing what aspects are checked. | 2 / 3 |
Completeness | Clearly answers both 'what' (review UI code for Web Interface Guidelines compliance) and 'when' (explicit 'Use when' clause with multiple trigger phrases). The when clause is explicit and well-structured. | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms that users would actually say: 'review my UI', 'check accessibility', 'audit design', 'review UX', 'check my site against best practices'. These cover multiple common phrasings users would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Terms like 'check accessibility' and 'review UX' could overlap with dedicated accessibility auditing or UX review skills. The 'Web Interface Guidelines' reference adds some distinctiveness, but the broad trigger terms like 'audit design' and 'best practices' could cause conflicts with other design or code review skills. | 2 / 3 |
Total | 10 / 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 is a thin wrapper that delegates almost all substance to a fetched external URL. While the approach of fetching fresh guidelines is clever, the skill itself provides little actionable content — no example output, no inline fallback rules, no error handling, and redundant sections. It would benefit from consolidating the duplicated workflow, adding an example review output, and including error handling for fetch failures.
Suggestions
Merge the 'How It Works' and 'Usage' sections into a single workflow to eliminate redundancy
Add an example showing expected output format (e.g., `src/Button.tsx:42 — missing aria-label on interactive element`) so Claude knows the target format even before fetching
Add error handling guidance: what to do if the URL fetch fails (e.g., fallback rules or ask user to provide guidelines manually)
Include a brief validation step — e.g., confirm the fetched content contains expected rule markers before proceeding with the review
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is relatively brief but has some redundancy — the 'How It Works' and 'Usage' sections largely repeat the same 4-step process. The explanation could be tightened by merging these sections. | 2 / 3 |
Actionability | It provides a concrete URL to fetch and names the tool (WebFetch), but the actual review logic is entirely delegated to the fetched content. There's no executable code, no example output, and no fallback if the fetch fails. Claude is told to apply rules but given no rules inline. | 2 / 3 |
Workflow Clarity | Steps are listed and sequenced, but there's no validation checkpoint (e.g., what to do if the fetch fails, how to handle parse errors in the fetched guidelines, or how to verify the output). The workflow is also stated twice in slightly different forms without adding clarity. | 2 / 3 |
Progressive Disclosure | The skill appropriately delegates the full ruleset to an external URL rather than inlining it, which is reasonable. However, there are no bundle files, no example output, and no reference to supplementary materials. The two redundant sections ('How It Works' and 'Usage') hurt organization. | 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.
- Repository
- vercel-labs/agent-skills
- Commit
4ec6f84
- 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.