frontend-design

Frontend Design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. The goal is to implement real working code with exceptional attention to aesthetic details and creative choices.

When to Activate

• Building web components, pages, or applications
• Creating landing pages or marketing sites
• Designing dashboards or admin interfaces
• Styling or beautifying any web UI
• Creating HTML/CSS layouts or React components
• When visual design quality matters

---

User Preferences (Default Style)

Unless explicitly overridden, apply these preferences:

Preference	Direction
Typography	Helvetica (or Helvetica Neue) as primary font
Aesthetic	Minimalist — clean, restrained, essential
Visual Style	Glassmorphism — frosted glass, backdrop blur, subtle transparency
Approach	Less is more — every element must earn its place

Minimalist Execution

• Whitespace as design element — generous, intentional negative space
• Limited color palette — 2-3 colors maximum, one accent
• Typography-driven hierarchy — size and weight, not decoration
• Subtle depth — glassmorphism over heavy shadows
• Refined details — precision in spacing, alignment, micro-interactions
• No visual clutter — remove anything that doesn't serve a purpose

Glassmorphism Implementation

/* Glass card pattern */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

/* Dark variant */
.glass-dark {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Key glassmorphism principles:

• Subtle blur (8-16px) — not overwhelming
• Low-opacity backgrounds (0.1-0.3)
• Thin, semi-transparent borders
• Works best with colorful or image backgrounds behind
• Maintain text contrast for accessibility