CtrlK
BlogDocsLog inGet started
Tessl Logo

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".

60

Quality

69%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Advisory

Suggest reviewing before use

Fix and improve this skill with Tessl

tessl review fix ./skills/web-design-guidelines/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

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 logic to an externally fetched document. While concise and well-structured, it provides minimal actionable guidance of its own — no example output, no error handling for fetch failures, and redundant workflow descriptions. The skill's value depends entirely on the availability and quality of the remote content.

Suggestions

Remove the redundancy between 'How It Works' and 'Usage' sections by merging them into a single workflow section.

Add an example of expected output format (e.g., `src/Button.tsx:42 — Missing aria-label on interactive element`) so Claude knows what to produce even before fetching the guidelines.

Add a fallback or error handling step for when the URL fetch fails (e.g., 'If fetch fails, inform the user and suggest they provide the guidelines manually').

DimensionReasoningScore

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 mentions using WebFetch, but the actual review logic is entirely delegated to the fetched content. There's no concrete code, no example output, and no fallback if the URL is unreachable. The skill essentially says 'fetch this URL and follow what it says.'

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 verify the fetched content is valid, or how to handle partial guideline matches). The workflow is also stated twice redundantly.

2 / 3

Progressive Disclosure

For a simple skill under 50 lines with no bundle files, the content is well-organized into clear sections (How It Works, Guidelines Source, Usage). No external references are needed beyond the fetch URL, and the structure is easy to navigate.

3 / 3

Total

9

/

12

Passed

Description

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.

This is a solid description with excellent trigger terms and completeness, clearly stating both what the skill does and when to use it. Its main weakness is that the capability description could be more specific about what concrete actions or checks are performed, and some trigger terms are broad enough to potentially conflict with other accessibility or design review skills.

Suggestions

Add specific concrete actions the skill performs, e.g., 'Reviews color contrast, keyboard navigation, semantic HTML, responsive layout, and ARIA usage against Web Interface Guidelines'

Narrow the distinctiveness by specifying the unique framework or standard being checked, e.g., clarify what 'Web Interface Guidelines' refers to and how it differs from WCAG or general accessibility audits

DimensionReasoningScore

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 navigation patterns'. The description tells us what it reviews against but not what specific checks or outputs it produces.

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-defined.

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 natural phrasings a user might use.

3 / 3

Distinctiveness Conflict Risk

The specific mention of 'Web Interface Guidelines compliance' provides some distinctiveness, but terms like 'check accessibility', 'audit design', and 'review UX' are broad enough to potentially overlap with general accessibility tools, design review skills, or UX audit skills.

2 / 3

Total

10

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
vercel-labs/agent-skills
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.