frontend-design

name	frontend-design
description	Create highly adaptive, production-grade frontend interfaces optimized for modern web standards and Generative UI pipelines. Use when building components, layouts, or design systems that require a distinct, non-generic aesthetic.

Modern Frontend Design (2027 Stack)

Create distinctive, high-performance frontend interfaces that completely avoid the generic, overused "AI-generated SaaS" aesthetic. Code must be semantic, cutting-edge, and ready for dynamic UI generation.

Design Thinking & Architecture

Before generating code, establish the architectural and aesthetic direction:

Principle	Focus
Adaptability	Is this component fluid enough to be injected into any Generative UI context without breaking?
Tech Paradigm	Maximize modern CSS primitives (Container Queries, Nesting, Native Popover) over heavy JS libraries.
Signature	What unique layout, interaction, or micro-topography prevents this from looking like a standard Tailwind template?

Tech-Driven Aesthetics Guidelines

Typography & Fluidity

• Use fluid typography via CSS clamp() tied to container dimensions, not just the viewport.
• Avoid system font fallbacks as a design choice; pair a highly characterful display font with a hyper-legible body font.
• Strict hierarchy using advanced font-metrics (like font-size-adjust) to prevent layout shifts.

Advanced Color Systems

• Mandatory oklch(): Define all palettes using oklch() for predictable, mathematically precise luminance and vibrant saturation across light/dark modes.
• Avoid flat hex/rgb gradients. Use multi-stop interpolation and non-linear color transitions.

Motion & Interactions (Native First)

• View Transitions API: Use native view transitions for seamless state changes and page-level morphing.
• Scroll-driven Animations: Implement native CSS @scroll-timeline or scroll() functions for scroll-triggered effects instead of heavy JS engines.
• Micro-interactions must feel tactile: dynamic spring physics for hovers and active states.

Layout & Componentization

• Container Queries First: Component styles must rely strictly on @container rules so they render perfectly regardless of where the AI or the user places them on the screen.
• Move beyond basic Bento Grids. Use asymmetric layouts, intentional overlaps, CSS Grid subgrids, and variable density.

Performance & Clean Code

• Zero layout shifts (CLS-free design).
• Native HTML features first (e.g., <dialog>, <details>, popover attribute).
• Explicit component boundaries optimized for React 19 / Next.js 16 streaming and Server Actions if applicable.

Anti-Patterns (NEVER Do)

❌ Standard, uncustomized Tailwind/shadcn aesthetic (Inter font, generic gray borders, predictable radiuses). ❌ Relying on Media Queries (@media) for component-level responsiveness. ❌ Legacy color models like Hex, RGB, or HSL for dynamic themes. ❌ Heavy JS animation libraries for effects that are now native (e.g., basic parallax or scroll reveals). ❌ Cliched dark mode styles (pure black background with neon purple/cyan cards).

Implementation Rules

• Minimalist Execution: Total restraint, surgical precision in spacing, flawless typography, and focus on micro-details.
• Maximalist Execution: Complex layer composition, advanced WebGPU/Canvas backgrounds, custom cursor contexts, and rich textures without sacrificing performance.