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.

Quality

66%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

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

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 lean, well-structured overview that correctly delegates the detailed rules to a single clearly-signaled reference file and specifies a concrete output format. Its weaknesses are a redundant duplicated workflow section and the absence of any example output or edge-case handling.

Suggestions

Merge 'How It Works' and 'Usage' into one workflow section; the two near-identical step lists waste tokens.

Add one example finding line (e.g., 'Button.tsx:14: icon-only button missing aria-label') to make the output format unambiguous.

Specify fallback behavior when a target file cannot be read or the upstream fetch fails (e.g., proceed on the pinned snapshot and note it).

Dimension	Reasoning	Score
Conciseness	The body is free of filler and assumes Claude's competence, but the 'How It Works' and 'Usage' sections repeat a nearly identical 5-step workflow (load guidelines, optionally fetch upstream, read files, apply rules, output findings). That whole-section duplication is more than the 'minor instances' of anchor 4, so it fits the 'could be tightened' anchor 3.	3 / 5
Actionability	The guidance is executable for an instruction-only skill: load the pinned references/guidelines.md (a real file, linked), optionally diff the upstream URL, read the target files, apply all rules, and 'Output findings in the terse file:line format'. The bulk of concrete rules correctly lives in the referenced file, but the body itself never shows a single example finding or the exact output shape, leaving a minor gap versus anchor 5.	4 / 5
Workflow Clarity	The sequence is clearly numbered with the optional upstream-fetch branch and the no-argument fallback ('If no files specified, ask the user') specified. This is a read-only review task, so the destructive/batch validation cap does not apply, but the duplicated step lists across two sections introduce mild ambiguity and there are no error-handling checkpoints (e.g., what to do if a referenced file is missing), keeping it at anchor 4.	4 / 5
Progressive Disclosure	The body is a short overview that appropriately splits the bulk rule content into references/guidelines.md — a real file, clearly signaled with markdown links, exactly one level deep with no nested references. Sections are well-organized and navigation is easy, matching the clear-overview anchor 5.	5 / 5
	Total	16 / 20 Passed

Description

61%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 is concise, third-person, and names a clear niche with a well-chosen set of natural trigger phrases. Its main gaps are the missing 'Use when…' clause and a single-action capability statement that limits specificity and completeness.

Suggestions

Add an explicit trigger clause, e.g. 'Use when the user asks to review, audit, or check UI/design code, mentions Vercel design standards, or wants an accessibility check.'

Concrete the action list: name the deliverable, e.g. 'Reviews UI code and outputs findings in file:line format across layout, typography, color, motion, and accessibility.'

Dimension	Reasoning	Score
Specificity	The description names the domain ('Review UI code for Web Interface Guidelines compliance') and lists covered areas ('layout, typography, color, motion, and accessibility'), but the only concrete action offered is reviewing for compliance — matching the 1-2 concrete actions anchor rather than the several-actions anchor at 4.	3 / 5
Completeness	The 'what' is clear (review UI code for guideline compliance across named areas), but there is no 'Use when…' clause or equivalent explicit trigger guidance in the description, which per the judging guidelines caps completeness at 3.	3 / 5
Trigger Term Quality	Natural phrases users would say are well covered — 'review my UI', 'check accessibility', 'audit design', 'review UX', 'design checklist', 'vercel design' — and the description itself carries area keywords. A few natural variations (e.g., 'lint my UI', 'design review', 'WCAG') are missing, so it falls just short of the comprehensive anchor 5.	4 / 5
Distinctiveness Conflict Risk	'Web Interface Guidelines compliance by the Vercel engineering team' carves out a distinct niche with dedicated trigger phrases ('vercel design', 'product ui standards'). There is minor overlap risk with generic accessibility- or design-review skills, so it is mostly distinct rather than fully minimal-conflict.	4 / 5
	Total	14 / 20 Passed

Validation

93%

Warnings & errors only

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

Validation — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: nexu-io/open-design
Path: skills/web-design-guidelines/SKILL.md
Commit: 1b47e60

Reviewed: 3 days ago

Table of Contents

Discovery Implementation Validation

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.