CtrlK
BlogDocsLog inGet started
Tessl Logo

visual-design

Guides and reviews the visual design and brand identity of UI components for web and React Native — color systems, typography pairing, visual hierarchy, signature details, and named style directions (minimal, swiss, editorial, brutalist, neo-brutalist, glass, soft-UI, terminal, playful, retro). Owns the generative, brand-aware side; defers WCAG contrast math, size minimums, and dark-mode mechanics back to /ux. Modes: `guide` (default — build a component from scratch), `review` (audit existing visuals against direction), `direction` (propose a style direction for a new product or feature). Triggers on "visual design", "make this look good", "brand identity", "style direction", "improve the visuals", "review the look", "does this look generic", "/visual-design".

69

Quality

87%

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

82%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, highly actionable skill body: clear mode detection, a sequenced four-phase workflow, mode-gated progressive disclosure, and concrete output templates. Main gaps are mild redundancy between the composition table and the quick-reference deferral list, the absence of an explicit output-validation step, and referenced rule/template files that could not be verified in the bundle.

Suggestions

Merge the "What this skill defers" quick-reference list into the Phase 3 composition table (or vice versa) to remove the duplicated ownership/deferral mapping.

Add an explicit final validation step in Phase 4, e.g. re-reading generated code to confirm named tokens were applied and that deferred /ux checks (contrast, size minimums) are listed rather than silently dropped.

Ensure the referenced rules/*.md and templates/direction-brief.md files ship with the skill, since the entire detailed guidance depends on them loading successfully.

DimensionReasoningScore

Conciseness

The body is a lean, table-driven index that assumes Claude's competence (no basic design-concept explanations), but the ownership/deferral mapping is stated twice — in the Phase 3 composition table and again in the "What this skill defers" quick reference — and the quick-reference section partially restates the opening. Not 5 because those redundant passages could be trimmed; not 3 because the padding is minor.

4 / 5

Actionability

Guidance is fully executable for an instruction skill: concrete commands ("git diff --name-only HEAD~1"), exact per-mode rule-file load tables, exact sibling-skill invocations with fallback behavior ("log one line ... and continue"), and copy-paste output templates (build sheet, review severity ladder with file:line and named-principle citation requirements).

5 / 5

Workflow Clarity

Four phases are clearly sequenced (context discovery → load rules → compose with siblings → output) with useful checkpoints ("State the detected mode and target in one line", "If ambiguous, ask", "Do not review or generate code you have not read") and explicit error paths for missing skills. Not 5 because there is no explicit output-validation step or feedback loop (e.g. re-checking that recommended tokens were actually applied in generated code).

4 / 5

Progressive Disclosure

The thin-index design is exemplary — references are one level deep, clearly signaled, and gated by mode with an explicit "Do not pre-load all rules" instruction. Scored 4 rather than 5 because the referenced files (rules/style-directions.md, rules/brand-identity.md, templates/direction-brief.md, etc.) are not present in the bundle, so the reference targets cannot be verified.

4 / 5

Total

17

/

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: specific, third-person, with explicit what/when structure and a clearly named niche. The explicit deferral boundary to /ux is a notable strength. The only weaknesses are a few missing natural trigger synonyms and residual overlap risk with /ux on broad visual-improvement phrasing.

Suggestions

Add one or two common natural trigger variants (e.g. "redesign this page/component", "make the UI look polished") to widen trigger coverage.

Sharpen the /ux boundary by naming which visual-improvement requests should route to /ux first, since "make this look good" could plausibly trigger either skill.

DimensionReasoningScore

Specificity

The description enumerates concrete capabilities ("color systems, typography pairing, visual hierarchy, signature details, and named style directions") and three concrete modes ("build a component from scratch", "audit existing visuals against direction", "propose a style direction"), giving comprehensive coverage of the domain.

5 / 5

Completeness

It explicitly answers what the skill does (capability list plus mode definitions) and when to use it ("Triggers on 'visual design', 'make this look good'..."), in third-person voice with concrete trigger phrases — matching the anchor-5 example structure.

5 / 5

Trigger Term Quality

Trigger list includes natural phrases users would say ("make this look good", "does this look generic", "improve the visuals") spanning all three modes, but a few common natural terms such as "redesign", "aesthetic", or "UI polish" are absent. Anchor 4 (good coverage, a few natural terms missing) fits better than 5, which demands comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

The explicit boundary ("defers WCAG contrast math, size minimums, and dark-mode mechanics back to /ux") actively demarcates a niche, but broad triggers like "make this look good" and "improve the visuals" sit in territory adjacent to the closely related /ux skill, leaving minor overlap risk rather than minimal.

4 / 5

Total

18

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_field

'metadata' should map string keys to string values

Warning

frontmatter_unknown_keys

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

Warning

Total

14

/

16

Passed

Repository
mthines/agent-skills
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.