frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

1.11x

Quality

63%

Does it follow best practices?

Impact

98%

1.11x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/data/1-frontend-design/SKILL.md

Evaluation results

98%

17%

Coffee Roastery Landing Page

Typography and color palette distinctiveness

Criteria

Without context

With context

No Inter font

100%

No Roboto font

100%

No Arial font

100%

No Space Grotesk font

100%

No system-ui font

100%

No purple gradient on white

100%

Distinctive named font used

50%

100%

Context-specific color palette

100%

Non-predictable typography pairing

20%

100%

No predictable hero layout

40%

80%

Output file present

100%

97%

Ergonomic Furniture Product Showcase

Bold aesthetic direction commitment

Criteria

Without context

With context

Aesthetic direction named

100%

Aesthetic rationale present

100%

No generic font families

75%

100%

No purple-gradient-on-white

100%

Non-standard layout

60%

70%

Complexity matches aesthetic

91%

100%

Consistent aesthetic execution

100%

Context-appropriate palette

100%

All three products shown

100%

Output file present

100%

10%

SaaS Pricing Comparison Component

Responsive design and real working functionality

Criteria

Without context

With context

Functional billing toggle

100%

Correct price values

100%

Responsive layout

100%

No Inter or Roboto font

100%

No Space Grotesk font

100%

No purple gradient on white

100%

Non-default background

100%

Recommended plan highlighted

100%

No placeholder functionality

100%

Output file present

100%

Non-standard card layout

70%

100%

Repository: majiayu000/claude-skill-registry
Commit: 632759f

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Coffee Roastery Landing Page Ergonomic Furniture Product Showcase SaaS Pricing Comparison Component

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.