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

60

Quality

70%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

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

Quality

Content

50%

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 nearly all substance to `references/guideline.md`, which is not provided in the bundle. The SKILL.md itself is structurally sound but redundant (duplicated workflow sections) and lacks any concrete examples of expected output or specific rules, making it hard for Claude to act on without the referenced file. The skill would benefit significantly from at least one concrete example and elimination of the duplicated sections.

Suggestions

Remove the duplicate workflow — merge 'How It Works' and 'Usage' into a single section to eliminate redundancy.

Add a concrete example showing a sample input snippet and the expected terse `file:line` output format, so Claude can act even if the referenced guideline file fails to load.

Include the `references/guideline.md` file in the bundle, or inline the most critical rules directly, since the skill is entirely dependent on it.

Remove or significantly trim the bullet list summarizing guideline topics — it duplicates what's in the referenced file and adds tokens without actionable value.

DimensionReasoningScore

Conciseness

The content has some redundancy — the 'How It Works' and 'Usage' sections are nearly identical 4-step processes. The bullet list under 'Guidelines Reference' summarizes what's already in the referenced file, adding tokens without much value. However, it avoids explaining basic concepts Claude already knows.

2 / 3

Actionability

The skill delegates all concrete rules and output format to `references/guideline.md`, which is not provided in the bundle. The SKILL.md itself contains no executable code, no concrete examples of findings output, and no specific rules — it's essentially a pointer. Without the referenced file, Claude has no actionable guidance from this file alone.

2 / 3

Workflow Clarity

The steps are listed clearly and the sequence is logical (read guidelines → read files → check → output). However, there are no validation checkpoints, no guidance on handling ambiguous cases, and no feedback loop for when files can't be parsed or rules conflict. The fallback for no files specified is mentioned, which is good.

2 / 3

Progressive Disclosure

The skill correctly references `references/guideline.md` as a one-level-deep reference, which is good structure. However, no bundle files were provided, so we can't verify the reference exists. The inline bullet list summarizing the guideline topics is a middle ground — it aids discovery but also duplicates content that lives in the referenced file. The navigation signal could be clearer.

2 / 3

Total

8

/

12

Passed

Description

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 terms, clear 'Use when' guidance, and outstanding disambiguation from related skills via explicit 'Do NOT use' clauses. The main weakness is that the specific capabilities could be more concrete — listing particular checks or actions rather than the broad 'visual design and interaction patterns' framing.

Suggestions

Add more specific concrete actions to improve specificity, e.g., 'Checks color contrast, validates semantic HTML, reviews responsive layouts, audits keyboard navigation, and evaluates interaction feedback patterns.'

DimensionReasoningScore

Specificity

It names the domain (UI code review for Web Interface Guidelines compliance) and mentions 'visual design and interaction patterns' as focus areas, but doesn't list multiple specific concrete actions like 'check color contrast, validate ARIA labels, review responsive layouts'.

2 / 3

Completeness

Clearly answers both 'what' (review UI code for Web Interface Guidelines compliance, focusing on visual design and interaction patterns) and 'when' (explicit 'Use when' clause with multiple trigger phrases). Also includes helpful 'Do NOT use' guidance for disambiguation.

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 highly natural phrases a user would actually type.

3 / 3

Distinctiveness Conflict Risk

Exceptionally distinctive — explicitly differentiates itself from related skills (core-web-vitals, seo, web-quality-audit) with clear 'Do NOT use' boundaries, making it very unlikely to conflict with other skills.

3 / 3

Total

11

/

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