frontend-design-skill

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use this skill when the user asks to build web components, pages, or applications. Covers bold aesthetic direction selection, architectural typography (curated Google Fonts, fluid clamp-based sizing), advanced CSS layout (grid-template-areas, subgrid, intentional overlapping, negative margins), surface and depth (layered shadows, SVG noise textures, grain effects), motion and micro-interactions (staggered animations, custom cubic-bezier easing, scroll-triggered reveals), CSS custom property systems (color palettes, spacing scales, type scales), anti-convergence enforcement (banned defaults, forced variation triggers), and a pre-finalization litmus test. Invoke when: building HTML/CSS pages or components, creating landing pages, designing web layouts, implementing animations or transitions, choosing typography or color palettes for web projects, the user asks for visually distinctive or creative UI, the user wants to avoid generic or cookie-cutter design, or when generating any frontend HTML/CSS that should look professionally designed rather than AI-generated.