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". Focuses on visual design and interaction patterns. Do NOT use for performance audits (use core-web-vitals), SEO (use seo), or comprehensive site audits (use web-quality-audit).

67

Quality

80%

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

Fix and improve this skill with Tessl

tessl review fix ./packages/skills-catalog/skills/(design)/web-design-guidelines/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

77%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 well-structured, appropriately delegating skill body: the SKILL.md stays an overview, points to a real one-level-deep reference, defines a clear workflow with a fallback, and specifies a concrete output format. Its main weakness is redundancy — the workflow is stated twice and the topic list restates the reference file's contents — which costs tokens without adding guidance.

Suggestions

Remove the 'Usage' section: it repeats the four steps of 'How It Works' almost verbatim, including a second instruction to read references/guideline.md.

Collapse the 14-item topic bullet list into a single line (e.g., 'covers accessibility, forms, focus, animation, typography, images, theming, i18n, and more') or drop it — it duplicates the guideline file's own structure.

Add one worked example of the expected output (e.g., 'src/Button.tsx:12 — icon-only button missing aria-label') to make the terse file:line format concrete.

DimensionReasoningScore

Conciseness

The body is mostly lean and assumes competence, but the 'Usage' section repeats the 'How It Works' 4-step process nearly verbatim, and the 14-item bullet list of topics duplicates the guideline file's own contents. Score 4 does not fit because a whole duplicated workflow section is more than 'minor instances' of over-explanation.

3 / 5

Actionability

Guidance is concrete and executable for an instruction-only skill: an exact reference path ('references/guideline.md'), explicit output rules ('Group findings by file', 'Use `file:line` format (VS Code clickable)', 'Terse, high signal-to-noise'), and a fallback ('If no files specified, ask the user'). Not score 5 because there is no worked example of an actual finding line to make the output spec copy-paste concrete.

4 / 5

Workflow Clarity

The sequence (read guidelines -> read files -> check rules -> output findings) is clear and unambiguous, with an explicit fallback for the missing-argument case. This is a read-only review task, so no destructive/batch validation cap applies, and the simple single-purpose skill qualifies for the workflow-clarity exception with a fully clear process.

5 / 5

Progressive Disclosure

Verified against the actual bundle: references/guideline.md exists (173 lines), is exactly one level deep with no nested references, and SKILL.md is a lean overview that clearly signals it in dedicated sections. Content is appropriately split — all rules live in the reference, and navigation is easy.

5 / 5

Total

17

/

20

Passed

Description

82%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: it explicitly states what the skill does and when to use it, uses natural trigger phrases in third person, and includes unusually good negative boundary guidance to route around neighboring skills. The only soft spot is that the capability statement covers a single review action rather than enumerating several specific actions.

DimensionReasoningScore

Specificity

The description names the domain ('Review UI code for Web Interface Guidelines compliance') with one core action and a scope statement ('Focuses on visual design and interaction patterns'), but does not list several distinct concrete actions like the score-4 anchor. It is not score 2 because the action named (compliance review) is concrete and domain-specific, not generic.

3 / 5

Completeness

Both questions are answered explicitly and in third person: what ('Review UI code for Web Interface Guidelines compliance... Focuses on visual design and interaction patterns') and when ('Use when asked to...') with concrete trigger phrases. This matches the score-5 anchor exactly.

5 / 5

Trigger Term Quality

Five natural, quotable trigger phrases ('review my UI', 'check accessibility', 'audit design', 'review UX', 'check my site against best practices') give good keyword coverage. Not score 5 because common synonyms and shorthand a user might naturally say — 'a11y', 'WCAG', 'front-end', 'design review' — are missing.

4 / 5

Distinctiveness Conflict Risk

A clear niche (Web Interface Guidelines compliance) is reinforced with explicit negative boundary guidance ('Do NOT use for performance audits (use core-web-vitals), SEO (use seo), or comprehensive site audits (use web-quality-audit)'), which minimizes conflict risk beyond even the typical score-5 example.

5 / 5

Total

17

/

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
tech-leads-club/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.