| 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.
