CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

design-qa

Use when a UI screen, page or component is about to be called done, handed off or shipped, or when generated UI looks generic or half-finished. Gates the rendered result, not the design file - finds controls that do nothing, placeholder copy, removed focus rings, missing loading/empty/error states, low contrast, small targets, hidden focus and broken reflow measured in the real browser, and flags template defaults without blocking on taste.

Quality

94%

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

The canonical home for this skill is design-qa in alirezarezvani/claude-skills

SKILL.md
Quality
Evals
Security

Quality

Content

100%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 body is an exemplary skill overview: a three-step executable pipeline with real commands and blocking exit codes, explicit operational rules, and a clean one-level-deep reference structure where every cited file exists. It teaches only what Claude could not infer (the scripts' semantics, the unlisted-is-missing rule, the waiver policy) and nothing else.

DimensionReasoningScore

Conciseness

The body is lean and telegraphic: a three-command workflow block, per-step behavior in a few sentences each, a hard-rules list, an exit-code table, and an annotated file list. No concept Claude already knows is explained (no WCAG primer, no library comparison), and every line maps to a command, a rule, or a file — matching the 5 anchor. It is above the 4 anchor because there is no padded or over-explained passage to trim.

5 / 5

Actionability

Guidance is fully executable and copy-paste ready: concrete commands with flags ("python scripts/finish_lint.py src/ --output json > lint.json", "node assets/capture_snapshot.mjs http://localhost:3000/invoices --width 320 --out s320.json"), documented exit codes per script ("0 clean · 2 findings · 3 bad input · 4 blocked"), and a no-Playwright fallback with the exact console snippet "copy(JSON.stringify(designQaSnapshot()))". This matches the 5 anchor with specific commands covering the common cases.

5 / 5

Workflow Clarity

The three steps are clearly sequenced (source lint → state matrix → rendered audit), and each step is itself a validation gate with documented blocking exit codes, making checkpoints explicit rather than implicit. Error handling is addressed through hard rules ("A waiver names the WCAG exception or a ticket… the scripts reject a waiver or NA with no reason", "Unverified is not pass") with the keyboard pass as the verification follow-up, and the sign-off file acts as the completion checklist — fitting the 5 anchor. It is not the 4 anchor because validation is built into every step via exit codes, not merely described.

5 / 5

Progressive Disclosure

The body is a concise overview and all detail lives one level deep: three reference files and six assets, each listed with a one-line description of its content in a "References and assets" section, and all listed paths exist in the bundle. Reference files contain no further document references (only an external source citation), so navigation is flat and well-signaled — matching the 5 anchor.

5 / 5

Total

20

/

20

Passed

Description

88%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 states a precise, comprehensive defect-detection scope with an explicit "Use when…" trigger clause covering the ship/handoff moment. The only weaknesses are a few missing natural synonyms ("design review", "polish") and mild trigger overlap with accessibility-audit skills on contrast/focus/reflow terms.

DimensionReasoningScore

Specificity

The description enumerates many concrete defect classes it detects — "controls that do nothing, placeholder copy, removed focus rings, missing loading/empty/error states, low contrast, small targets, hidden focus and broken reflow measured in the real browser" — plus what it does about each (blocks vs. "flags template defaults without blocking on taste"). This is comprehensive coverage matching the 5 anchor; it exceeds the 4 anchor because no check category is missing.

5 / 5

Completeness

It explicitly answers both questions: "Use when a UI screen, page or component is about to be called done, handed off or shipped, or when generated UI looks generic or half-finished" gives concrete when-triggers, and "Gates the rendered result, not the design file - finds…" states clearly what it does. This matches the 5 anchor with explicit trigger phrases for both what and when.

5 / 5

Trigger Term Quality

Natural phrases a user would say are present — "about to be called done, handed off or shipped", "generated UI looks generic or half-finished" — giving good keyword coverage. It falls short of the 5 anchor because common variations like "design review", "polish", or "UI audit" are absent, but sits above the 3 anchor since the included triggers are varied and phrased the way users actually talk.

4 / 5

Distinctiveness Conflict Risk

The pre-ship framing ("Gates the rendered result, not the design file") carves out a clear niche distinct from design-generation skills, but the defect list includes "low contrast, small targets, hidden focus and broken reflow" — terms that overlap with a generic accessibility-audit skill's triggers. Mostly distinct with minor overlap risk against closely related a11y skills, fitting the 4 anchor rather than 5.

4 / 5

Total

18

/

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.

Validation — 15 / 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

alirezarezvani/claude-skills

Path

product-team/skills/design-qa/SKILL.md

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.