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.

1.03x

Quality

70%

Does it follow best practices?

Impact

98%

1.03x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/anthropic-frontend-design/SKILL.md

The canonical home for this skill is frontend-design in anthropics/skills

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.

The content is a well-structured, opinionated design playbook with concrete token-system instructions, a clear two-pass workflow, and self-critique checkpoints. It could be tightened in places (persona setup and some elaboration) but otherwise earns high marks for actionability and organization.

Suggestions

Trim the opening studio-persona framing and consolidate overlapping principle prose to reduce token weight.

Make the pre-build review an explicit pass/fail gate (e.g. 'do not start coding until the plan passes the uniqueness check') to strengthen the workflow checkpoint.

Consider a compact checklist or ASCII wireframe example to make the layout ideation step more copy-paste actionable.

Dimension	Reasoning	Score
Conciseness	The body is dense and mostly additive (e.g. the AI-design-defaults calibration is genuinely non-obvious), but the opening persona paragraph and several elaborative sentences could be trimmed, matching 'mostly efficient but includes some unnecessary explanation or could be tightened'.	3 / 5
Actionability	Gives concrete, executable guidance for an instruction-only skill ('describe the palette as 4-6 named hex values', 'typefaces for 2+ roles', 'ASCII wireframes', 'single signature element'), with only minor gaps, fitting 'mostly executable guidance; concrete instructions with minor gaps'.	4 / 5
Workflow Clarity	A clear named sequence ('brainstorm, explore, plan, critique, build, critique again') with checkpoints (review plan against brief before building; critique as you build) and a feedback loop, though validation is implicit rather than an explicit pass/fail gate, matching the 'clear sequence with most checkpoints present' anchor.	4 / 5
Progressive Disclosure	The body is under 50 lines, well-organized into clear ## sections, and needs no external references; per the simple-skill exception this earns the top anchor on well-organized sections alone.	5 / 5
	Total	16 / 20 Passed

Description

70%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 communicates a distinctive visual-design niche with both a what and an explicit when clause, scoring well on trigger quality and distinctiveness. Its main weakness is generic verbs ('Guidance for', 'Helps with') that keep specificity and completeness just below the top anchors.

Suggestions

Replace generic verbs with concrete actions, e.g. 'Designs distinctive palettes, pairs typefaces, and lays out pages' to lift specificity.

Sharpen the when clause with concrete trigger phrases like 'Use when building or redesigning a UI, landing page, or marketing site'.

Add a couple of natural synonyms or product terms (e.g. 'redesign', 'visual identity', 'design system') to broaden trigger coverage.

Dimension	Reasoning	Score
Specificity	Names the domain (visual design / UI) and concrete sub-areas ('aesthetic direction, typography') but the verbs are generic ('Guidance for', 'Helps with') rather than specific actions, matching the 'names domain and 1-2 concrete actions' anchor.	3 / 5
Completeness	It answers both what ('Guidance for distinctive, intentional visual design') and when ('when building new UI or reshaping an existing one') with an explicit trigger clause, but the when could be more specific (e.g. landing pages, redesign requests), fitting the 'both present, when could be more explicit' anchor.	4 / 5
Trigger Term Quality	Natural terms users would say are present ('building new UI', 'reshaping an existing one', 'visual design', 'aesthetic direction', 'typography'); a few common variations or synonyms are missing, so it sits above the midpoint but not at comprehensive coverage.	4 / 5
Distinctiveness Conflict Risk	The niche (distinctive visual design for UI, avoiding templated defaults) is mostly distinct with only minor overlap risk against general web-development skills, matching 'mostly distinct; minor overlap risk'.	4 / 5
	Total	15 / 20 Passed

Validation

100%

Warnings & errors only

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: boisenoise/skills-collections
Path: skills/anthropic-frontend-design/SKILL.md
Commit: 19c310e

Reviewed: about 22 hours ago

Table of Contents

Discovery Implementation Validation

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.