frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

1.09x

Quality

58%

Does it follow best practices?

Impact

96%

1.09x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

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

Evaluation results

100%

Recipe Book Landing Page

Typography and color distinctiveness

Criteria

Without context

With context

No generic body fonts

100%

No generic display fonts

100%

Distinct display font

100%

Two-font pairing

100%

CSS variables for color

100%

Dominant + accent palette

100%

No purple-on-white cliché

100%

Cohesive color theme

100%

Font loaded externally

100%

Typography hierarchy

100%

Context-matched aesthetic

100%

98%

19%

Independent Music Artist Showcase Page

Motion, layout, and visual depth

Criteria

Without context

With context

CSS-only animations

77%

100%

Staggered page-load reveals

100%

Single orchestrated load sequence

87%

100%

Hover state interactions

100%

Asymmetric layout

50%

90%

No standard symmetric grid

75%

100%

Creative background treatment

90%

100%

Depth and atmosphere

87%

100%

Scroll or viewport interaction

22%

88%

Motion matches complexity

80%

100%

No plain white or default background

100%

92%

SaaS Pricing Page for a Developer Tool

Bold aesthetic direction and anti-generic design

Criteria

Without context

With context

No Inter font

100%

No Roboto font

100%

No Space Grotesk font

100%

No purple gradient on white

100%

Named aesthetic direction

Non-standard card layout

50%

100%

Distinctive color choice

100%

Non-system font used

100%

Visual distinctiveness

87%

100%

Complexity-vision match

100%

No predictable hero layout

90%

100%

Cohesive point of view

100%

Repository: sc30gsw/claude-code-customes
Commit: 45a1bdf

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

Table of Contents

Recipe Book Landing Page Independent Music Artist Showcase Page SaaS Pricing Page for a Developer Tool

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.