CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-aesthetics

Guide frontend design decisions to create distinctive, creative UIs that avoid generic AI-generated aesthetics. Use when building UI components, designing layouts, selecting colors/fonts, or implementing animations.

68

Quality

83%

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 lean, highly actionable reference with specific font/theme/hex recommendations, an executable CSS pattern, a defined output format, and a validation checklist. Its weaknesses are mild redundancy (When to Use / Notes repeating the description and principles) and an implicit rather than explicit workflow ordering.

Suggestions

Trim redundancy: drop or shrink the 'When to Use' section (it restates the frontmatter description) and fold 'Notes' into the relevant principle sections to tighten conciseness.

Make the workflow explicit: reorder to principles -> output format -> anti-pattern checklist, and add a short step telling Claude to re-check the checklist warnings and revise the design before finalizing (a fix-and-revalidate loop).

Consolidate the Example into the Output Format section so the template and its worked instance sit together, reducing duplication between the two sections.

DimensionReasoningScore

Conciseness

The body is dense and actionable (AVOID/recommended lists, a CSS snippet, a JSON output schema) with no padding or explanations of concepts Claude already knows. Not a 5 because the 'When to Use' section repeats the frontmatter description and 'Notes' reiterates principles already covered ('Variation is critical', 'Performance: CSS-only preferred').

4 / 5

Actionability

Guidance is fully concrete: named fonts (JetBrains Mono, Playfair Display, DM Sans), named themes (Dracula, Nord, Tokyo Night), an executable CSS stagger snippet, hex codes in the worked example (#0f172a, #38bdf8), and a precise JSON output template. As an instruction-only skill, this copy-ready specificity covers the common cases, matching the 5 anchor.

5 / 5

Workflow Clarity

The implicit sequence (read principles per category -> produce the JSON output -> validate against the anti-pattern checklist) is clear and the checklist serves as an explicit validation checkpoint. Not a 5 because the steps are never stated as a sequence — the checklist appears before the Output Format section it validates, and there is no fix-and-recheck loop if validation fails.

4 / 5

Progressive Disclosure

The ~90-line body is well organized into one-level sections with no external files needed and no nested references; nothing qualifies as bulk material that clearly belongs in a separate file. Not a 5 because the skill exceeds the under-50-line simple-skill threshold and sections like the Example and Notes could be consolidated or trimmed for a tighter overview.

4 / 5

Total

17

/

20

Passed

Description

83%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 with an explicit 'Use when...' trigger clause and multiple concrete trigger activities. The main verb ('Guide frontend design decisions') is slightly abstract, keeping specificity just below comprehensive, and a few natural synonyms (styling, typography, CSS) are missing.

DimensionReasoningScore

Specificity

The description names the domain ('frontend design decisions') and several concrete action areas ('building UI components, designing layouts, selecting colors/fonts, or implementing animations'), which is several specific actions with minor gaps. It falls short of 5 because the core 'what' verb ('Guide... decisions') stays somewhat abstract relative to the comprehensive anchor.

4 / 5

Completeness

Both halves are explicit: the 'what' is 'Guide frontend design decisions to create distinctive, creative UIs that avoid generic AI-generated aesthetics' and the 'when' is a concrete 'Use when...' clause with multiple trigger phrases. This matches the anchor 'clearly and explicitly answers both what AND when with concrete trigger phrases' rather than the 4 anchor where the 'when' is less explicit.

5 / 5

Trigger Term Quality

Natural trigger phrases like 'building UI components', 'designing layouts', 'selecting colors/fonts', and 'implementing animations' map well to what a user would say when needing this skill. Not a 5 because common synonyms such as 'styling', 'CSS', 'typography', or 'landing page' are absent.

4 / 5

Distinctiveness Conflict Risk

The niche (aesthetic design guidance, avoiding generic AI aesthetics) is distinct with clear triggers, but 'building UI components' and 'designing layouts' overlap with general frontend/web-development and styling skills. Minor overlap risk with closely related skills, matching the 4 anchor; not 3 since the aesthetic-specific framing ('avoid generic AI-generated aesthetics') clearly separates it.

4 / 5

Total

17

/

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.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
maslennikov-ig/claude-code-orchestrator-kit
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.