CtrlK
BlogDocsLog inGet started
Tessl Logo

aesthetic

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

75

Quality

92%

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

85%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, actionable skill body with clear workflows, an explicit aesthetic-quality feedback loop, and clean one-level-deep reference disclosure. The only weakness is redundancy in the closing 'Key Principles' section, which restates earlier guidance.

Suggestions

Trim or remove the 'Key Principles' section — items like 'Aesthetic standards come from humans, not AI', 'Iterate based on analysis', and 'Always evaluate aesthetic quality objectively (score ≥ 7/10)' already appear in the BEAUTIFUL stage, Workflow 2, and the four-stage framework.

If keeping principles, replace the restated ones with genuinely additive guidance not already covered earlier in the document.

Consolidate the per-stage 'Reference' lines so each reference is introduced once where it is first relevant, reducing repeated links to references/design-principles.md.

DimensionReasoningScore

Conciseness

The body is mostly efficient and assumes Claude's competence, but the 'Key Principles' section restates content already covered (humans-not-AI, iterate, balance beauty/functionality, document, score ≥ 7/10) — redundancy that could be trimmed. Not score 1 because it avoids explaining basics Claude already knows; not score 3 because of the duplicated principles.

2 / 3

Actionability

Concrete, executable guidance throughout: specific timing '150-300ms', 'ease-out for entry, ease-in for exit', explicit 'score < 7/10' threshold, concrete save paths ('./docs/design-guideline.md'), and per-step tool assignment. As an instruction-only skill this matches the 'concrete, specific guidance' top anchor.

3 / 3

Workflow Clarity

Workflow 2 has an explicit validation checkpoint with a feedback loop — 'If score < 7/10... identify weaknesses, refine prompt, regenerate... Repeat until aesthetic standards met (score ≥ 7/10)' — meeting the clear-sequence-with-validation anchor.

3 / 3

Progressive Disclosure

Clear overview body pointing to well-signaled, one-level-deep references (references/design-principles.md, micro-interactions.md, storytelling-design.md, design-resources.md) and asset templates, all verified to exist as real bundle files.

3 / 3

Total

11

/

12

Passed

Description

100%

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, complete description: concrete capabilities, explicit 'Use when' triggers covering natural design vocabulary, and a clearly distinct aesthetic-design niche. All dimensions hit the top anchor.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'building UI/UX, analyzing designs... generating design images... implementing visual hierarchy and color theory, adding micro-interactions... creating design documentation' — matching the 'lists multiple specific concrete actions' anchor.

3 / 3

Completeness

Explicitly answers what ('Create aesthetically beautiful interfaces...') and when ('Use when building UI/UX, analyzing designs...') with an explicit 'Use when' trigger clause.

3 / 3

Trigger Term Quality

Natural terms a user would say (UI/UX, inspiration sites, design images, color theory, micro-interactions, design documentation) are well covered; integration skills like ai-multimodal/chrome-devtools are named as tools, not jargon triggers.

3 / 3

Distinctiveness Conflict Risk

The aesthetic-design niche (capturing/analyzing inspiration, iterative image generation, BEAUTIFUL/RIGHT/SATISFYING/PEAK stages) is clearly distinct from sibling skills like ui-styling or web-frameworks.

3 / 3

Total

12

/

12

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
mrgoonie/claudekit-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.