frontend-design

Commit to a bold aesthetic direction before coding, avoid overused fonts like Inter and Roboto, use tinted neutrals instead of pure grays, and vary spacing rhythmically. This Skill provides explicit anti-patterns covering gradient text, nested cards, and glassmorphism overuse.

It covers typography pairing and fluid scales, OKLCH color systems with WCAG contrast, spatial design with container queries, motion timing with exponential easing, interaction states including focus rings, responsive patterns, and UX writing for buttons and errors.

Yes, the guidelines are framework-agnostic design principles that apply to any frontend stack. The output is working production-grade code that can target plain HTML/CSS, React components, or utility frameworks like Tailwind.

Code reveals what was built but not who it is for or how it should feel. Without confirmed target audience, use cases, and brand personality, design output defaults to generic patterns, so the skill mandates gathering this context first.

AI tends to converge on safe, recognizable patterns like cyan-on-dark palettes, hero metric layouts, and identical card grids. The skill mitigates this with explicit DON'T guidelines, but human review of accessibility contrast and real-device testing remains necessary.