CtrlK
BlogDocsLog inGet started
Tessl Logo

web-design-guidelines

Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.

56

Quality

65%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

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

Quality

Content

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

The content is a clean, well-structured overview that delegates the rule bulk to a single real reference file, exemplifying good progressive disclosure. Its main weakness is redundancy — the workflow and the pinned/upstream explanation each appear twice — which hurts conciseness without adding clarity.

Suggestions

Collapse the 'How It Works' and 'Usage' sections into one canonical numbered workflow to remove the near-duplicate step list.

State the pinned-vs-upstream sourcing once; reference it from the workflow rather than re-explaining it in a separate section.

Add a one-line example of the 'file:line' output format so the expected result is unambiguous.

DimensionReasoningScore

Conciseness

The body is mostly efficient, but the 5-step workflow is repeated nearly verbatim in both 'How It Works' and 'Usage', and the pinned-vs-upstream explanation is also stated twice, so it could be tightened.

3 / 5

Actionability

Concrete guidance is present — a specific reference path, an upstream URL, and a 'terse file:line' output format — with rules appropriately deferred to the reference file; only minor gaps such as a missing example output remain.

4 / 5

Workflow Clarity

A clear sequenced 5-step process is given with a conditional branch for missing files; as a read-only review skill it needs no validation checkpoints, though the duplicated step list slightly muddies the single canonical flow.

4 / 5

Progressive Disclosure

The body is a concise overview pointing to a single well-signaled one-level-deep reference (references/guidelines.md, verified present), with the bulk of rules correctly split out into that file.

5 / 5

Total

16

/

20

Passed

Description

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

The description clearly states what the skill does and the compliance areas it covers, but omits any explicit 'when to use it' trigger guidance, which caps completeness and weakens trigger-term quality. Distinctiveness is strong thanks to the Vercel-specific framing.

Suggestions

Add an explicit 'Use when…' clause naming concrete trigger phrases (e.g. 'Use when reviewing UI code, auditing accessibility, or checking product UI against design standards').

Surface natural user phrasings such as 'review my UI', 'audit design', or 'check accessibility' inside the description to improve trigger-term coverage.

Include file-extension or surface cues (e.g. '.tsx/.jsx product UI') to sharpen distinctiveness from general code-review skills.

DimensionReasoningScore

Specificity

Names the domain ('Review UI code for Web Interface Guidelines compliance') and lists several concrete coverage areas ('layout, typography, color, motion, and accessibility'), but rests on a single primary action rather than multiple distinct actions.

4 / 5

Completeness

The 'what' is clear and detailed, but the 'when' is only weakly implied with no explicit 'Use when…' clause, capping completeness at 3 per the rubric guidance.

3 / 5

Trigger Term Quality

Relevant keywords appear ('UI code', 'accessibility', 'product UI') but no natural 'Use when…' trigger phrase is present and common user variations/synonyms are missing.

3 / 5

Distinctiveness Conflict Risk

'Web Interface Guidelines compliance by the Vercel engineering team' carves a clear niche with distinct triggers, with only minor overlap risk against generic design-review skills.

4 / 5

Total

14

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
nexu-io/open-design
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.