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". Fetches latest Vercel guidelines and checks files against all rules.
79
70%
Does it follow best practices?
Impact
92%
1.43xAverage score across 3 eval scenarios
Advisory
Suggest reviewing before use
Optimize this skill with Tessl
npx tessl skill review --optimize ./.agent-skills/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 with excellent trigger term coverage and clear completeness. The explicit 'Use when...' clause with natural user phrases makes it highly discoverable. The main weakness is that the specific capabilities could be more concrete - listing specific checks or rule categories would strengthen the specificity dimension.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI code review, Web Interface Guidelines) and mentions some actions (fetches guidelines, checks files against rules), but doesn't list specific concrete actions like 'check color contrast', 'validate ARIA labels', or 'audit responsive breakpoints'. | 2 / 3 |
Completeness | Clearly answers both what (review UI code for Web Interface Guidelines compliance, fetches Vercel guidelines, checks files against rules) and when (explicit 'Use when...' clause with multiple trigger phrases). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would say: 'review my UI', 'check accessibility', 'audit design', 'review UX', 'check my site against best practices'. These are realistic phrases users would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focusing specifically on Vercel Web Interface Guidelines compliance. The combination of UI review + accessibility + Vercel guidelines creates a distinct identity unlikely to conflict with generic code review or other design skills. | 3 / 3 |
Total | 11 / 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 reasonable framework for UI code review but suffers from redundancy and lacks concrete implementation details. The core concept of fetching live guidelines is sound, but the skill repeats the workflow in multiple sections and doesn't provide executable examples of how to actually apply rules to code. The metadata section consumes tokens without adding actionable value.
Suggestions
Consolidate the redundant workflow explanations (How It Works, Instructions, Usage) into a single clear sequence with validation steps for WebFetch failures
Add a concrete code example showing how to parse a specific rule from the fetched guidelines and identify a violation in sample code
Remove or significantly trim the Metadata section - version numbers, tags, and platform support don't help Claude execute the skill
Add error handling guidance: what to do if WebFetch fails, if the guidelines URL changes, or if the fetched content format is unexpected
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Contains some redundancy - the 'When to use this skill' section repeats the description, and the workflow is explained multiple times (How It Works, Instructions, Usage sections). The metadata section at the end adds tokens without clear value for Claude. | 2 / 3 |
Actionability | Provides the WebFetch URL and general process, but lacks executable code examples. The WebFetch syntax shown isn't a real tool invocation format, and there's no concrete example of how to actually parse/apply the fetched guidelines to code. | 2 / 3 |
Workflow Clarity | Steps are listed (fetch, analyze, apply) but lack validation checkpoints. No guidance on what to do if WebFetch fails, if guidelines format changes, or how to handle partial file reads. The workflow is clear but missing error recovery. | 2 / 3 |
Progressive Disclosure | References external guidelines appropriately, but the skill itself is somewhat monolithic with redundant sections. The Related Skills links are good, but content could be better organized - multiple sections repeat the same workflow information. | 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
- supercent-io/skills-template
- Commit
c033769
- 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.