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

93%

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

SKILL.md
Quality
Evals
Security

Quality

Content

93%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-engineered skill body: executable commands with verified flags, explicit blocking semantics per step, and a clean split between a lean overview and verified one-level-deep bundle files. The single gap is that the fix-and-re-run loop is left implicit despite the exit-code table making it obvious.

DimensionReasoningScore

Conciseness

The body is lean with no explanations of concepts Claude already knows — even the opening failure examples ("a button wired to `() => {}`", "an empty state that says 'Lorem ipsum'") and the note that contrast "is composited through translucent layers and `opacity`" convey non-obvious, skill-specific information. Every section earns its tokens, matching the 5 anchor.

5 / 5

Actionability

The workflow block gives copy-paste-ready commands with flags and output files (e.g. `python scripts/finish_lint.py src/ --output json > lint.json`), the exit-code table documents every script's outcomes, and a concrete no-Playwright fallback is provided ("Paste `assets/collect_snapshot.js` into the DevTools console"). The claimed `--help`/`--sample`/`--output` flags were verified to exist in all three scripts, so guidance is fully executable.

5 / 5

Workflow Clarity

The three-step sequence is clearly ordered with explicit per-step blocking conditions and documented validation via exit codes ("0 clean · 2 findings · 3 bad input · 4 blocked"), which is stronger than the 4 anchor's bare "verify output is valid". However, the error-recovery loop — fix findings and re-run until a script exits 0 — is implied by the exit codes rather than stated, so it falls just short of the 5 anchor's explicit "if errors: fix and re-validate" feedback loop.

4 / 5

Progressive Disclosure

The body is a pure overview: workflow, hard rules, a script table, and a references section where all detail (WCAG 2.2 criteria, per-kind state requirements, template traits) lives in one-level-deep files. Every referenced path was verified to exist in references/, scripts/ and assets/, and the reference files contain no nested references, so navigation is clean and matches the 5 anchor.

5 / 5

Total

19

/

20

Passed

Description

92%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: explicit and specific trigger conditions paired with a comprehensive, concrete inventory of what the skill detects, in third-person voice with no padding. The only weakness is slightly incomplete synonym coverage in its trigger terms.

DimensionReasoningScore

Specificity

The description lists nine distinct concrete capabilities — "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" — which is comprehensive coverage of the rendered-UI QA domain. It exceeds the 4 anchor because there are no minor gaps in the action inventory.

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" is a concrete when-clause, and "Gates the rendered result... finds [specific defects]" is a clear what. The when-clause is already explicit and specific, so the 4 anchor's qualifier does not apply.

5 / 5

Trigger Term Quality

Natural trigger phrases like "about to be called done, handed off or shipped" and "generated UI looks generic or half-finished" match what a user would actually say. It falls short of the 5 anchor because common variations such as "design review", "UI polish" or "before/after screenshot" are absent, though the existing terms are more specific than the generic keywords of the 3 anchor.

4 / 5

Distinctiveness Conflict Risk

"Gates the rendered result, not the design file" carves out a clear niche distinct from source-level accessibility scans or design-generation skills, and the pre-handoff trigger conditions are unlikely to fire for the wrong skill. Conflict risk is minimal, matching the 5 anchor rather than the minor-overlap 4 anchor.

5 / 5

Total

19

/

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/design-qa/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.