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.
70
58%
Does it follow best practices?
Impact
89%
1.15xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./frontend-design/SKILL.mdEvaluation results
100%
Obscura Films — Studio Landing Page
Film studio landing page
No generic fonts
100%
100%
Font pairing
100%
100%
CSS custom properties
100%
100%
Non-solid background
100%
100%
Background depth
100%
100%
CSS keyframe animation
100%
100%
Staggered reveals
100%
100%
Hover animation
100%
100%
Asymmetric layout
100%
100%
No purple gradient
100%
100%
Dominant + sharp accent
100%
100%
68%
1%Prism — Features Showcase Section
React features section with Motion
Motion library used
0%
0%
Staggered entrance
70%
50%
No generic fonts
70%
100%
Font pairing
100%
100%
Color variable system
60%
100%
Dominant + sharp accent
100%
100%
Asymmetric layout
90%
50%
Hover animation via Motion
100%
100%
Non-solid background
80%
80%
No purple gradient
100%
100%
100%
36%Kiln & Clay — Online Collection Showcase
Artisanal ceramics collection page
No generic fonts
100%
100%
Font pairing
100%
100%
Non-solid background
0%
100%
Background depth effect
0%
100%
CSS custom properties
100%
100%
Dominant + accent palette
100%
100%
No purple gradient
100%
100%
Spatial composition
26%
100%
CSS animation
100%
100%
Hover interaction
100%
100%
- Repository
- block/agent-skills
- Commit
60bfdad
- 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.