# Frontend Design

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

- Skill: `luizedupp/frontend-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add luizedupp/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/luizedupp/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: LuizEduPP (https://skillmd.com/u/luizedupp)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/luizedupp/frontend-design

---


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