CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

84

1.03x
Quality

Does it follow best practices?

Impact

98%

1.03x

Average score across 3 eval scenarios

SecuritybySnyk

Passed

No known issues

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.

The body is a well-structured, highly actionable design skill with concrete deliverables, a sequenced two-pass process, and an explicit validation gate. Its only real weakness is mild verbosity from role-play framing and philosophical asides that could be trimmed without losing clarity.

DimensionReasoningScore

Conciseness

Mostly high-signal (the three default AI looks with concrete hex values, a precise token-system spec, CSS specificity warning), but it carries role-play flavor and philosophical prose (the Chanel anecdote, "Elegance is executing the chosen vision well") that could be tightened. Not 3 because of that flavor/padding; not 1 because it does not explain basics Claude already knows.

2 / 3

Actionability

Gives a concrete, specific deliverable spec ("4–6 named hex values", typefaces for "2+ roles", "ASCII wireframes", a single "signature" element) plus a defined two-pass build process. For an instruction-only skill this is actionable, specific guidance, so absence of code is not penalized. Not 2 because the guidance is complete rather than pseudocode-level or missing key details.

3 / 3

Workflow Clarity

Sequences the work ("brainstorm, explore, plan, critique, build, critique again") as a two-pass process with an explicit validation gate ("review that plan against the brief before building"; "Only after you've confirmed the relative uniqueness... should you start to write the code") and a critique feedback loop. Not 2 because an explicit checkpoint and error-recovery loop (revise the part that reads like a default) are present.

3 / 3

Progressive Disclosure

A single ~49-line SKILL.md with well-organized sections (Ground it in the subject, Design principles, Process, Restraint and self-critique, More on writing) and no bundle files; per the simple-skill note, well-organized sections with no need for external references score 3. Not 2 because there is no nested-reference or monolithic-wall-of-text problem.

3 / 3

Total

11

/

12

Passed

Description

67%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description states a clear what and an explicit when-clause, but relies on soft verbs and a narrow set of trigger terms, with some overlap risk against general frontend skills. It is solid but could be sharpened with more concrete actions and broader trigger phrasing.

Suggestions

Replace soft verbs ("Guidance for", "Helps with") with concrete actions, e.g. "Design distinctive palettes, pair display/body typefaces, and lay out UI that avoids templated defaults."

Add broader natural trigger terms users would say, such as "redesign", "frontend", "web design", or "make this page look distinctive", ideally in a "Use when..." clause.

Narrow the when-clause to the design-aesthetic intent (e.g. "Use when creating or reshaping a UI's visual identity and the brief calls for a distinctive, non-templated look") to reduce overlap with general frontend coding skills.

DimensionReasoningScore

Specificity

Names the domain and some actions ("building new UI or reshaping an existing one", "aesthetic direction, typography"), but the verbs are soft ("Guidance for", "Helps with") and the actions are not as concrete as a list like extract/fill/merge. Not 3 because no multiple specific concrete actions are enumerated; not 1 because it clearly identifies the domain and several activities.

2 / 3

Completeness

Explicitly answers what (guidance for distinctive visual design, typography, making non-templated choices) and when ("when building new UI or reshaping an existing one"), so the missing-trigger cap does not apply. Not 2 because an explicit when-clause is present, not below because both what and when are stated.

3 / 3

Trigger Term Quality

Contains relevant natural terms ("visual design", "UI", "typography", "aesthetic direction") a user might say, but coverage is thin and lacks common variations like "design", "redesign", "frontend", "make it look good". Not 3 because the keyword coverage is not broad; not 1 because the terms present are natural rather than jargon.

2 / 3

Distinctiveness Conflict Risk

The niche (distinctive visual design, avoiding templated defaults) is reasonably specific, but the trigger "building new UI" overlaps with general frontend/web-development skills. Not 3 because of that overlap risk; not 1 because it is far more specific than generic placeholders like "Helps with documents".

2 / 3

Total

9

/

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
anthropics/claude-plugins-official
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.