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. Generates creative, polished code that avoids generic AI aesthetics.
92
90%
Does it follow best practices?
Impact
94%
1.59xAverage score across 6 eval scenarios
Passed
No findings from the security scan
Evaluation results
88%
47%Interactive Task Manager UI
Motion design and interaction patterns
Transform/opacity only
20%
30%
Exponential easing
20%
100%
No bounce/elastic easing
100%
100%
Grid-template-rows height animation
0%
100%
Prefers-reduced-motion
0%
100%
Focus-visible
100%
100%
No outline removal
50%
87%
Container queries
0%
100%
Progressive disclosure
100%
100%
Specific button labels
62%
87%
Mobile-first CSS
0%
62%
State-conveying motion
100%
100%
97%
11%Product Landing Page for a Design Tool
Layout distinctiveness and anti-pattern avoidance
Bold aesthetic direction
90%
90%
No identical card grid
70%
100%
No large icon above heading
100%
100%
No glassmorphism decoration
100%
75%
No generic card shadows
100%
100%
Asymmetric or varied layout
87%
100%
Varied spacing rhythm
87%
100%
Not everything in cards
100%
100%
No nested cards
100%
100%
Button hierarchy
100%
100%
No center-everything
100%
100%
Fluid spacing clamp
0%
100%
99%
49%SaaS Revenue Dashboard
Color palette and typography distinctiveness
OKLCH color usage
0%
100%
No pure black/white
62%
100%
Tinted neutrals
75%
100%
No AI color palette
0%
100%
No gradient text
100%
100%
No overused fonts
0%
100%
Fluid type scale
0%
100%
Rem/em font sizes
87%
87%
No gray on color
87%
100%
Distinctive font pairing
100%
100%
No dark+glow default
12%
100%
No monospace for aesthetic
100%
100%
- Repository
- The-Vibe-Company/companion
- Commit
90804d3
- 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.