frontend-aesthetics
When to Use
Triggers: When building UI, a landing page, dashboard, settings panel, or any user-facing interface — before writing markup or choosing fonts, colors, or motion.
Load when: starting a UI from scratch, redesigning a generic-looking interface, or when the output "looks like every other AI-generated site." This skill governs VISUAL CRITERION, not technical correctness — pair it with react-19 / tailwind-4 / nextjs-15 for the implementation layer.
Core problem it solves: without explicit guidance, generation converges toward "on-distribution" defaults — generic, safe, forgettable. This skill forces distinctiveness.
The Direction-First Process
NEVER open a UI task by writing markup. Lock these five decisions FIRST, state them explicitly, then generate code constrained by them:
- Aesthetic direction — name it concretely: brutalist, editorial, retro-futuristic, solarpunk, luxury, terminal/IDE, playful, Swiss-minimal. "Modern and clean" is NOT a direction — it's the absence of one.
- Font pairing — one distinctive pairing with high contrast (see Pattern 1).
- Constrained color system — one dominant + sharp accents, as CSS variables (see Pattern 2).
- Motion focus point — ONE orchestrated moment, not scattered micro-interactions (see Pattern 3).
- Background/depth treatment — atmosphere over flat solid color (see Pattern 4).
Interpret creatively. Make unexpected choices that feel genuinely designed for THIS context. Vary between light/dark, different fonts, different aesthetics across projects — do not converge on one house style.