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.
76
74%
Does it follow best practices?
Impact
66%
0.98xAverage score across 3 eval scenarios
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./.agents/skills/frontend-design/SKILL.mdEvaluation results
0%
-19%Build a Team Showcase Component for Stray Pixel Studio
Animated React team showcase with Motion library
Motion library import
0%
0%
motion.* JSX elements
0%
0%
Staggered entrance animation
0%
0%
Hover animation
0%
0%
Scroll-triggered animation
0%
0%
Variants defined
0%
0%
No generic fonts
100%
0%
Distinctive font imported
0%
0%
Display and body font pairing
0%
0%
No purple-on-white
100%
0%
CSS custom properties
0%
0%
Complexity matches aesthetic
16%
0%
100%
8%Ember & Thorn — Brand Launch Landing Page
Distinctive HTML/CSS landing page avoiding generic AI aesthetics
No banned fonts
100%
100%
Two distinct fonts
100%
100%
CSS color variables
100%
100%
Dominant + accent palette
100%
100%
Gradient or mesh background
100%
100%
Texture or depth effect
100%
100%
Non-standard layout element
100%
100%
Asymmetry or diagonal
100%
100%
Page-load CSS animation
100%
100%
Staggered animation delay
0%
100%
Surprise hover state
100%
100%
No purple-on-white cliché
100%
100%
100%
10%Form & Function Summit — Conference Poster Page
Design-thinking documentation and bold aesthetic execution for a conference poster page
Rationale block present
100%
100%
Extreme tone named
100%
100%
Differentiation articulated
100%
100%
Unconventional fonts
0%
100%
Asymmetric or grid-breaking layout
100%
100%
Atmospheric background
100%
100%
CSS variables for color
100%
100%
Aesthetic consistency
100%
100%
Animation or transition present
100%
100%
Distinct light or dark theme
100%
100%
- Repository
- databricks/devhub
- Commit
ade58e4
- 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.