CtrlK
BlogDocsLog inGet started
Tessl Logo

aesthetic

Visual design intelligence and UI aesthetics. Integrates: chrome-devtools, ai-multimodal, media-processing. Capabilities: design analysis, visual hierarchy, color theory, typography, micro-interactions, animation, design systems, accessibility. Actions: analyze, design, create, capture, evaluate, implement UI aesthetics. Keywords: Dribbble, Behance, Mobbin, design inspiration, visual hierarchy, color palette, typography, spacing, animation, micro-interaction, design system, style guide, accessibility, WCAG, contrast ratio, golden ratio, whitespace, visual rhythm. Use when: building beautiful UIs, analyzing design inspiration, implementing visual hierarchy, adding animations/micro-interactions, creating design systems, evaluating aesthetic quality, capturing design screenshots.

68

Quality

81%

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

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.

A well-organized instruction skill with strong progressive disclosure — a lean overview pointing to real, clearly-signaled reference and asset files — and concrete actionable specifics. It is held back by philosophical padding, a redundant Key Principles section, and a few abstract maxims that dilute the executable guidance.

Suggestions

Remove or merge the 'Key Principles' section since it restates the Core Philosophy and Quick Reference Framework already covered above, tightening conciseness.

Cut the motivational closing ('Claude is capable of extraordinary creative work. Don't hold back...') and philosophical filler ('Beautiful designs lacking usability are worthless') to earn its token budget.

Replace abstract spatial maxims ('Unexpected layouts. Asymmetry. Overlap. Diagonal flow.') with one concrete pattern or example so the guidance is copy-paste actionable rather than aspirational.

DimensionReasoningScore

Conciseness

The body is mostly efficient but includes padded philosophical prose ('AI lacks aesthetic sense', 'Beautiful designs lacking usability are worthless'), a motivational closing, and a Key Principles section that restates the earlier BEAUTIFUL/RIGHT/SATISFYING/PEAK framework.

3 / 5

Actionability

It gives concrete, executable specifics — 150-300ms timing, ease-out/ease-in curves, a >=7/10 quality threshold, named tools (anime.js v4, chrome-devtools, ai-multimodal), and templates with save paths — but interleaves them with abstract maxims like 'Unexpected layouts. Asymmetry. Overlap.'

4 / 5

Workflow Clarity

Workflows 1 and 2 are numbered with named tools per step, and Workflow 2 includes a quality checkpoint (>=7/10) with an iterate-until-met feedback loop; the only gap is the absence of explicit error-recovery handling, though the operations are not destructive.

4 / 5

Progressive Disclosure

The SKILL.md is a concise overview that signals one-level-deep references with explicit 'Load for...' purpose (design-principles, micro-interactions, storytelling-design, animejs, implementation-guide, workflows, design-resources) plus two asset templates, all verified to exist as real bundle files.

5 / 5

Total

16

/

20

Passed

Description

91%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, well-structured description that explicitly covers what the skill does and when to use it, with rich natural trigger terms. The main weakness is that the Actions are generic verbs rather than concrete verb-noun phrases, and there is minor overlap risk with sibling UI skills.

DimensionReasoningScore

Specificity

Lists comprehensive capabilities (visual hierarchy, color theory, typography, micro-interactions, animation, design systems, accessibility) plus an Actions block, but the action verbs (analyze, design, create, capture, evaluate, implement) are generic single-words rather than concrete verb-noun phrases, leaving minor gaps.

4 / 5

Completeness

It explicitly answers 'what' (Capabilities + Actions) and 'when' with concrete trigger phrases in the 'Use when:' clause (building beautiful UIs, analyzing design inspiration, adding animations/micro-interactions, evaluating aesthetic quality).

5 / 5

Trigger Term Quality

The Keywords block covers comprehensive natural terms and synonyms a design-minded user would say — Dribbble, Behance, Mobbin, design inspiration, color palette, typography, spacing, animation, micro-interaction, style guide, WCAG — matching the anchor for full coverage.

5 / 5

Distinctiveness Conflict Risk

It carves a clear visual-aesthetic niche with distinctive triggers (Dribbble, design inspiration, contrast ratio), but overlaps slightly with closely related UI skills like ui-styling and web-frameworks that it itself integrates.

4 / 5

Total

18

/

20

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
samhvw8/dot-claude
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.