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:

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.

Overview

Use this skill for the capability described in this document.

When to Use

Use this skill when the request matches the capability, constraints, and activation cues described below.

Core Workflow

Follow the primary workflow, commands, and decision points documented in the sections below.

Examples

Use the examples and snippets already present in this document whenever they apply to the task.

Best Practices

Follow the constraints, conventions, and cautions documented below, and prefer the documented path over improvisation.

References

Use any linked scripts, assets, reference files, and companion resources mentioned in this document.

• Maximalist Execution: Complex layer composition, advanced WebGPU/Canvas backgrounds, custom cursor contexts, and rich textures without sacrificing performance.