---
name: frontend-design
description: Guidelines for generating distinctive, production-grade frontend interfaces and eliminating AI design cliches.
version: 1.3.0
author: ZeroLabs
runtime: claude-code, cursor, antigravity, openclaw, codex
---

# Frontend Design Heuristics & Execution Rules

## 1. Core Principles
- **Function-Driven Hierarchy:** Prioritize clarity of information, readability, and user workflows over decorative elements.
- **Systematic Typography:** Use curated Google Fonts with tuned line-height (1.4–1.6 for body, 1.15–1.25 for headings) and tight tracking (-0.01em to -0.025em) on large display text.
- **Cohesive Color Token Architecture:** Define semantic CSS variables for background, foreground, surface, border, and accent colors with WCAG AA compliance (4.5:1 minimum contrast).
- **Dynamic & Tactile States:** Provide immediate interactive feedback using micro-transitions (hover, active, focus-visible) and defined focus rings.
- **Fluid Responsiveness:** Design mobile-first with adaptive layouts that scale gracefully from 320px mobile viewports to 4K desktop screens without layout shifts.

## 2. Forbidden Cliché Tropes (Blocked)
1. **No Purple-on-Dark Overuse:** Avoid repetitive neon purple, violet glow, or fuchsia accents on pure black backgrounds.
2. **No Untracked Typefaces:** Never output oversized headings without letter-spacing adjustments (tighten headings, space small caps).
3. **No Over-Nested Cards:** Eliminate cards nested three levels deep inside other cards.
4. **No Bento Box Clutter:** Do not fill empty page real estate with arbitrary, disconnected stat boxes.
5. **No Visual Placeholders:** Never output broken image paths, empty placeholder blocks, or fake mockups without working code.
6. **No Unstyled Scrollbars:** Always style scrollbar tracks and thumbs to blend with the container theme.

## 3. Implementation Workflow
1. **Define Tokens First:** Establish CSS custom properties for colors, spacing, and typography in the project's root stylesheet (`:root`) or the framework theme config. Do not invent one-off hex values in component files.
2. **Structure Semantically:** Use <header>, <main>, <article>, <nav>, and <section> with proper ARIA attributes.
3. **Build Responsive Components:** Implement CSS Grid and Flexbox with container query awareness.
4. **Verify Accessibility:** Ensure keyboard navigation order and focus management remain intact.