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.
Install with Tessl CLI
npx tessl i github:supercent-io/skills-template --skill web-design-guidelines79
Quality
70%
Does it follow best practices?
Impact
92%
1.43xAverage score across 3 eval scenarios
Optimize this skill with Tessl
npx tessl skill review --optimize ./.agent-skills/web-design-guidelines/SKILL.mdDiscovery
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 well-crafted skill description with strong trigger terms and explicit 'Use when...' guidance. The main weakness is that the specific capabilities could be more detailed - it mentions checking against 'all rules' but doesn't enumerate what types of rules or what specific outputs the skill produces.
Suggestions
Add 2-3 specific examples of what rules are checked (e.g., 'color contrast ratios, keyboard navigation, semantic HTML, responsive breakpoints')
| 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 multiple specific concrete actions like what aspects are checked or what outputs are produced. | 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 scenarios). | 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 + Vercel guidelines + accessibility/UX audit 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 executable guidance. The workflow is understandable but missing validation steps and error handling. The reliance on fetching external guidelines is appropriate, but the skill doesn't adequately handle failure cases or provide fallback behavior.
Suggestions
Remove redundant sections: consolidate 'How It Works' and 'Instructions' into a single workflow, and remove the 'When to use' section since triggers are in the description
Add error handling: specify what to do if WebFetch fails or returns unexpected content, and include a validation step after fetching guidelines
Make the WebFetch call more concrete: show the actual tool invocation format Claude should use rather than pseudo-syntax
Remove or relocate the Metadata section - version numbers, tags, and related skills don't help Claude execute the skill
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Contains some redundancy - the 'When to use this skill' section repeats trigger phrases already in the description, and the workflow is explained twice (once in 'How It Works' and again in 'Instructions'). The metadata section at the end adds bulk without value for Claude. | 2 / 3 |
Actionability | Provides the WebFetch URL and output format, but lacks executable code examples. The 'Apply Rules' step is vague - it doesn't show how to actually parse or apply rules programmatically. The WebFetch syntax shown isn't a real executable format. | 2 / 3 |
Workflow Clarity | Three-step workflow is clear (fetch, analyze, apply), but lacks validation checkpoints. No guidance on what to do if WebFetch fails, if guidelines format changes, or how to handle files that can't be parsed. Missing feedback loop for error recovery. | 2 / 3 |
Progressive Disclosure | References external guidelines appropriately, but the skill itself is somewhat monolithic with sections that could be condensed. The metadata section and redundant explanations bloat the main file rather than being organized efficiently. | 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.
- 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.