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.

54

Quality

60%

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

Fix and improve this skill with Tessl

tessl review fix ./plugins/frontend-design/skills/frontend-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

67%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.

The body is a well-structured, opinionated design guide with concrete rules, specific anti-patterns (named hex values, typography tells), and a clear plan-review-build-critique workflow with an explicit pre-build checkpoint. Its main weakness is conciseness — the flowing prose could be tightened — and the absence of any progressive split given it runs slightly long for a single file.

Suggestions

Tighten the longest paragraphs (e.g. the opening studio framing and the AI-generated-traits list) into scannable bullets or shorter sentences; cut phrases that restate the same point.

Consider moving 'More on writing in design' into a separate reference file (e.g. WRITING.md) and linking to it from the body, leaving the core design guidance leaner and under the simple-skill threshold.

Add a short explicit critique checklist (e.g. 'before finishing: confirm palette is not a default tell, type is not the cliché default, motion is restrained, one memorable element') to push workflow clarity from a clear sequence toward a checklist-driven loop.

DimensionReasoningScore

Conciseness

The body is genuinely substantive opinionated guidance Claude does not already know (specific AI-generated tells with exact hex values, concrete typography anti-patterns), so it is not penalized for explaining known concepts; however the prose is dense and lengthy with multi-paragraph flow (e.g. lines 9, 17, 30, 43, 45) that could be tightened. Fits the 3 anchor ('mostly efficient but includes some unnecessary explanation or could be tightened') rather than 4, because several paragraphs carry padding that does not earn its place.

3 / 5

Actionability

Concrete, specific guidance throughout: 'line lengths of less than 80 characters', '4–6 named hex values', explicit anti-patterns to avoid with exact codes (#F4F1EA, #D97757, #0B0B0B), and a two-pass process producing a token system with ASCII wireframes. As an instruction-only skill the absence of code is not penalized; it stops at 4 rather than 5 because some directives stay abstract ('take aesthetic risk if justified', 'Spend your boldness in one place') with no concrete decision procedure.

4 / 5

Workflow Clarity

The Process section gives a clear sequence — brainstorm token plan, review against the brief, revise, then 'Only after you've confirmed the relative uniqueness of your design plan should you start to write the code', plus self-critique while building. This is a clear sequence with a real pre-build checkpoint; it is not 5 because there is no explicit error-recovery feedback loop or checklist, and not 3 because the review-against-brief checkpoint is explicit. The skill is design-oriented, not destructive/batch, so the feedback-loop cap does not apply.

4 / 5

Progressive Disclosure

No bundle files exist and the skill is self-contained with clear section headers ('Design principles', 'Process', 'Restraint and self-critique', 'More on writing in design'), no nested or broken references, and nothing that clearly belongs in a separate file. It is a 4 rather than 5 because the body is slightly over the ~50-line simple-skill threshold and the 'More on writing in design' section is tangential enough that it could plausibly be split off, leaving the core leaner.

4 / 5

Total

15

/

20

Passed

Description

53%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.

The description clearly states what the skill does and carves out a recognizable niche (distinctive, non-templated frontend design), but it lacks an explicit 'Use when...' trigger clause and omits several of the most common user phrasings (frontend, web, CSS, website). The reliance on 'Guidance for' / 'Helps with' framing also keeps the action specificity at the midpoint.

Suggestions

Add an explicit 'Use when...' clause, e.g. 'Use when building or redesigning web UI, landing pages, or frontend components, or when the user asks for distinctive visual design or help avoiding generic/templated looks.'

Include more natural user-facing trigger terms and synonyms — 'frontend', 'web', 'website', 'CSS', 'styling', 'landing page', 'component design' — alongside 'UI' and 'typography'.

Replace the vague 'Guidance for' / 'Helps with' framing with concrete action verbs (e.g. 'Designs distinctive UI', 'Selects palette and typography', 'Builds non-templated frontend layouts').

DimensionReasoningScore

Specificity

Names the domain (visual design / UI) and a couple of concrete areas ('aesthetic direction, typography', 'choices that don't read as templated defaults'), but the framing verbs are vague ('Guidance for...', 'Helps with...') and coverage is not comprehensive. It is not a 4 because the anchors at 4 require several concrete action verbs, whereas here the actions are abstracted away behind 'Guidance for' / 'Helps with'; it is above 2 because it does go beyond naming the domain into specific design axes.

3 / 5

Completeness

There is a clear 'what' (distinctive intentional visual design for building/reshaping UI), but there is no explicit 'Use when...' clause or equivalent trigger guidance; 'when' is only weakly implied by 'when building new UI or reshaping an existing one'. Per the judging guidelines a missing explicit trigger clause caps completeness at 3, so it cannot reach 4 even though the 'what' is clear.

3 / 5

Trigger Term Quality

It surfaces several relevant natural terms ('visual design', 'UI', 'typography', 'aesthetic'), but it omits very common ways users actually request this ('frontend', 'web', 'website', 'CSS', 'styling', 'landing page'). Fits the 3 anchor ('some relevant keywords but missing common variations or synonyms') rather than 4, because the missing set includes the most frequent user phrasings.

3 / 5

Distinctiveness Conflict Risk

The niche is fairly clear — distinctive, anti-templated visual design — with triggers like 'typography' and 'choices that don't read as templated defaults' that distinguish it from a generic web-development skill. It is not a 5 because 'visual design when building new UI' still overlaps with general UI/web-design skills, leaving minor conflict risk.

4 / 5

Total

13

/

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
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.