CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

design-review

Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use /plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish". Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site.

Quality

82%

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

SKILL.md
Quality
Evals
Security

Quality

Content

66%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 core design-audit workflow is excellent — highly actionable commands, precise thresholds, and a well-sequenced fix/verify loop with strong feedback mechanisms. However, the skill is delivered as a monolithic 1,200+ line file with no bundle structure, and a large fraction of the body is duplicated or framework-level boilerplate that dilutes the valuable domain content.

Suggestions

Move the shared gstack preamble (Voice, AskUserQuestion Format, Completeness Principle, Contributor Mode, Telemetry prompting flows) into a framework-level reference file and keep only a short pointer in this SKILL.md, cutting ~340 lines of boilerplate.

Extract the 10-category/~80-item audit checklist and the test-framework bootstrap into references/ files (e.g., references/audit-checklist.md, references/test-bootstrap.md) loaded on demand, so the main file is an overview of the 11 phases.

Deduplicate content: the AI Slop blacklist appears verbatim in Phase 3 category 9 and again under Design Hard Rules, and the browse-binary detection block is repeated — keep one canonical copy and reference it.

DimensionReasoningScore

Conciseness

Roughly the first 340 lines are gstack framework boilerplate (Voice, AskUserQuestion format, telemetry prompting flows, Completeness Principle tables, Contributor Mode) unrelated to design review; the AI Slop blacklist is duplicated verbatim (Phase 3 category 9 and "AI Slop blacklist" under Design Hard Rules) and the browse-binary setup block appears twice. This is noticeably verbose with several padded sections (anchor 2) — not 1, because the design checklists are genuine non-obvious domain knowledge rather than concepts Claude already knows.

2 / 5

Actionability

Fully executable throughout: exact commands like `$B screenshot "$REPORT_DIR/screenshots/first-impression.png"`, complete `$B js "JSON.stringify(...)"` extraction scripts, `$D generate --brief ... --output ...`, a commit message format (`style(design): FINDING-NNN — short description`), and numeric thresholds (44px touch targets, 4.5:1 contrast, ≤3 fonts). Copy-paste ready and covering common cases — the 5 anchor, with no material gaps that would drop it to 4.

5 / 5

Workflow Clarity

Eleven clearly sequenced phases with explicit validation checkpoints and feedback loops: clean-tree check before starting, per-fix re-test with before/after screenshots (8d), verified/best-effort/reverted classification (8e), immediate `git revert` on regression, risk-based self-regulation every 5 fixes with a hard cap of 30, and a final re-audit that warns if scores regress. This matches the 5 anchor; the destructive-operation cap does not apply because validation and revert loops are present.

5 / 5

Progressive Disclosure

No bundle files exist at all — no references/, scripts/, or assets/ — so everything is inlined in a single ~1,200-line SKILL.md. The framework preamble, the ~80-item design checklist, and the entire test-framework bootstrap clearly belong in separate one-level-deep reference files, matching anchor 2 ("content that clearly belongs in separate files is inlined"). Not 3, because this is not minor inline overflow — the majority of the file should live elsewhere; not 1, because phase and section headers keep it navigable.

2 / 5

Total

14

/

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: it names concrete capabilities across the whole audit-fix-verify loop in third person, provides explicit quoted trigger phrases for when to use it, and proactively disambiguates the sibling plan-mode skill. The only weakness is trigger synonym coverage, which is good but not exhaustive.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions covering the full loop — "finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions", "fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots" — comprehensive coverage with no meaningful gaps, matching the 5 anchor rather than 4.

5 / 5

Completeness

Explicitly answers both "what" (find → fix → atomic commit → re-verify with before/after screenshots) and "when" ("Use when asked to 'audit the design', 'visual QA', ...") with concrete trigger phrases, exactly matching the 5 anchor; the when-clause is fully explicit so 4 does not apply.

5 / 5

Trigger Term Quality

Includes quoted natural trigger phrases users would say ("audit the design", "visual QA", "check if it looks good", "design polish") plus proactive triggers ("visual inconsistencies", "polish the look of a live site"), but misses common variations like "design review" or "make it look better" — good coverage, not comprehensive, so 4 rather than 5.

4 / 5

Distinctiveness Conflict Risk

A clear niche (rendered-site design QA with a fix/verify loop) with design-specific triggers, and it even disambiguates the nearest conflict ("For plan-mode design review (before implementation), use /plan-design-review") — minimal conflict risk, matching the 5 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

skill_md_line_count

SKILL.md is long (1227 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository

valeriibeck-star/claude-skills

Path

skills/gstack/.agents/skills/gstack-design-review/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.