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", "check my site against best practices", or "web interface guidelines".

64

Quality

81%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

75%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A tight, well-structured audit checklist: concrete thresholds, stable rule IDs, a specified output format, and a prioritized review order make it immediately usable. The main gaps are minor redundancy across sections, no violation/fix code examples, and no verification step for reported findings.

Suggestions

Add one bad→good code example per category (e.g., a <div onClick> next to the corrected <button>) so findings can be reported with concrete fix guidance, lifting actionability.

Deduplicate rules that appear in two sections — consolidate focus-trap/return-focus and aria-busy into single authoritative rules (A11Y-03/CP-05 and A11Y-05/CP-02 currently repeat them).

If the skill grows, split per-category detail (e.g., full A11Y or PERF guidance) into one-level-deep reference files linked from the overview sections.

DimensionReasoningScore

Conciseness

The body is a lean, checklist-style rule set with concrete thresholds ('4.5:1 minimum', '44x44px', 'clamp(1rem, 2.5vw, 2rem)') that assumes Claude's competence and avoids explaining basics. Minor duplication keeps it below the level-5 anchor: focus-trap/return-focus appears in both A11Y-03 and CP-05, and aria-busy appears in both A11Y-05 and CP-02.

4 / 5

Actionability

Rules are concrete and checkable ('Icon-only buttons MUST have aria-label', 'Use min-height: 100dvh (not 100vh)') with a fully specified output format and a worked example ('src/Button.tsx:12 — [A11Y-01] Missing aria-label on icon button'). It stops short of the level-5 anchor because there are no bad→good code examples illustrating typical violations and fixes.

4 / 5

Workflow Clarity

The Review Checklist provides an explicit prioritized audit sequence ('check in this order (CRITICAL first): 1. CRITICAL: A11Y-01, A11Y-02, SEC-01...') plus a defined report format, giving a clear sequence for the audit workflow. It lacks a final verification pass over reported findings, so it matches the level-4 anchor rather than the explicit-validation level-5 anchor; the destructive/batch cap does not apply since this is a read-only audit.

4 / 5

Progressive Disclosure

The document is well-organized with stable rule IDs, clear sections, and a prioritized checklist, and it is appropriately self-contained with no bundle files. At ~190 lines it exceeds the under-50-line single-file exception, and per-category detail could be split into one-level-deep reference files, placing it at the 'good structure; minor organization gaps' anchor rather than level 5.

4 / 5

Total

16

/

20

Passed

Description

78%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description with an explicit 'what' and a well-specified 'Use when' clause containing natural quoted trigger phrases. Its main weakness is thin specificity — it states a single composite action rather than enumerating the concrete review areas (accessibility, performance, responsive, etc.) it actually covers.

DimensionReasoningScore

Specificity

The description names the domain ('Review UI code for Web Interface Guidelines compliance') and one concrete action — reviewing/auditing — which matches the anchor for naming a domain with 1-2 concrete actions. It does not list several specific actions (accessibility, performance, responsive checks are only implied through trigger quotes), so it falls short of the level-4 anchor.

3 / 5

Completeness

It explicitly answers both 'what' ('Review UI code for Web Interface Guidelines compliance') and 'when' ('Use when asked to...') with concrete quoted trigger phrases, matching the level-5 anchor exactly. The 'when' clause is explicit and specific, so it clearly exceeds the level-4 anchor where 'when' could be more explicit.

5 / 5

Trigger Term Quality

Quoted phrases like "review my UI", "check accessibility", "audit design", "review UX", and "check my site against best practices" are natural user phrasings with good coverage. A few common terms are missing (e.g., 'a11y', 'WCAG', 'front-end review', 'heuristic evaluation'), so it does not reach the comprehensive level-5 anchor.

4 / 5

Distinctiveness Conflict Risk

The 'Web Interface Guidelines' niche is distinct with dedicated trigger phrases. 'check accessibility' and 'audit design' could still overlap with a dedicated accessibility or design-system skill, matching the 'mostly distinct; minor overlap risk' anchor rather than the minimal-conflict level-5 anchor.

4 / 5

Total

16

/

20

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
CloudAI-X/claude-workflow-v2
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.