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

—

Does it follow best practices?

Impact

98%

1.03x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

100%

Landing Page for an Independent Knife Maker

Two-pass design workflow with documented plan

Criteria

Without context

With context

Plan file exists

100%

Named hex palette

100%

Two typeface roles

100%

Layout concept documented

100%

Signature element named

100%

Self-critique section present

100%

Avoids warm-cream-terracotta default

100%

Avoids near-black acid-green default

100%

Subject-grounded choices

100%

Plan implemented faithfully

100%

Hero is not big-number template

100%

Structural devices meaningful

100%

94%

Botanical Garden Member Dashboard

Typography, copy writing, and structural device decisions

Criteria

Without context

With context

Non-generic typeface pair

100%

Type scale defined

100%

Active voice buttons

100%

User-side naming

100%

Empty state is directional

90%

100%

Error state is specific

90%

100%

Numbered sections decision documented

100%

Consistent action naming

75%

87%

Sentence case copy

50%

Subject-specific typography

80%

90%

No filler copy

80%

100%

Hero Section for an Independent Jazz Club

Hero design with deliberate motion and single bold element

Criteria

Without context

With context

Hero avoids overlay template

100%

Hero avoids big-number template

100%

motion-notes.md present

100%

Motion justified per element

100%

Removed motion documented

100%

Single bold element

100%

No scattered animation

75%

100%

Reduced motion respected

100%

Mobile responsive

100%

Keyboard focus visible

100%

Subject-grounded hero content

100%

No AI-default palette

100%

Repository: anthropics/claude-plugins-official
Commit: 30a213f

Evaluated: 18 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Landing Page for an Independent Knife Maker Botanical Garden Member Dashboard Hero Section for an Independent Jazz Club

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.