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.
Install with Tessl CLI
npx tessl i github:sc30gsw/claude-code-customes --skill frontend-design72
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillEvaluation — 96%
↑ 1.09xAgent success when using this skill
Validation for skill structure
Evaluation results
100%
Recipe Book Landing Page
Typography and color distinctiveness
No generic body fonts
100%
100%
No generic display fonts
100%
100%
Distinct display font
100%
100%
Two-font pairing
100%
100%
CSS variables for color
100%
100%
Dominant + accent palette
100%
100%
No purple-on-white cliché
100%
100%
Cohesive color theme
100%
100%
Font loaded externally
100%
100%
Typography hierarchy
100%
100%
Context-matched aesthetic
100%
100%
Without context: $0.3963 · 1m 55s · 8 turns · 9 in / 9,366 out tokens
With context: $0.8403 · 4m 21s · 18 turns · 295 in / 18,851 out tokens
98%
19%Independent Music Artist Showcase Page
Motion, layout, and visual depth
CSS-only animations
77%
100%
Staggered page-load reveals
100%
100%
Single orchestrated load sequence
87%
100%
Hover state interactions
100%
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%
100%
Without context: $0.3658 · 1m 41s · 8 turns · 9 in / 8,435 out tokens
With context: $1.2903 · 6m 25s · 16 turns · 64 in / 34,240 out tokens
92%
6%SaaS Pricing Page for a Developer Tool
Bold aesthetic direction and anti-generic design
No Inter font
100%
100%
No Roboto font
100%
100%
No Space Grotesk font
100%
100%
No purple gradient on white
100%
100%
Named aesthetic direction
0%
0%
Non-standard card layout
50%
100%
Distinctive color choice
100%
100%
Non-system font used
100%
100%
Visual distinctiveness
87%
100%
Complexity-vision match
100%
100%
No predictable hero layout
90%
100%
Cohesive point of view
100%
100%
Without context: $0.3629 · 1m 47s · 10 turns · 10 in / 7,970 out tokens
With context: $0.5861 · 2m 56s · 18 turns · 125 in / 12,019 out tokens
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6
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.