| name | frontend-design |
| description | 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 UI that avoids generic AI aesthetics. |
| emoji | 🎨 |
Before coding, establish four things: Purpose, Tone (pick a distinct aesthetic —
minimalist, maximalist, retro-futuristic, brutalist, editorial...), Constraints,
and Differentiation (the one memorable element). Choose a clear conceptual
direction and execute it with precision.
Five dimensions:
- Typography — beautiful, unique display/body pairings; no generic defaults.
- Color & theme — a cohesive palette with one dominant color + sharp accents,
driven by CSS variables.
- Motion — purposeful CSS animations, orchestrated load reveals, scroll triggers.
- Spatial composition — asymmetry, overlap, diagonal flow, deliberate negative space.
- Backgrounds & detail — gradients, texture, shadows for depth.
Avoid the AI-slop tells: overused fonts (default Inter), predictable purple
gradients, everything centered, uniformly rounded corners, cookie-cutter layouts.
Source: github.com/anthropics/skills (Apache-2.0). Condensed + attributed for the corlinman marketplace; see ../../ATTRIBUTION.md.
