Frontend Design Play Makers

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Avoids generic AI aesthetics in favor of bold, memorable designs.
---

# Frontend Design Skill

This skill is invoked when building web components, pages, or applications. It focuses on generating creative, polished code with attention to aesthetic details and creative choices.

## Core Principles

The code you produce should be:
- **Production-grade**: Functional and ready for deployment
- **Visually striking**: Immediately impressive and engaging
- **Memorable**: Distinctive and unforgettable
- **Cohesive**: Clear aesthetic point-of-view throughout
- **Refined**: Meticulously polished in every detail

## Aesthetic Direction

Before designing, choose an extreme aesthetic to inspire unique designs:

| Style | Description |
|-------|-------------|
| **Minimal** | Extreme restraint, essential elements only |
| **Maximalist Chaos** | Bold, layered, overwhelming sensory experience |
| **Retro-Futuristic** | Nostalgic meets speculative technology |
| **Organic/Natural** | Flowing forms, natural textures, biophilic |
| **Luxury/Refined** | Premium materials, sophisticated details |
| **Playful/Toy-like** | Fun, bouncy, childlike wonder |
| **Editorial/Magazine** | Typography-driven, dramatic layouts |
| **Brutalist/Raw** | Exposed structure, harsh contrasts |
| **Art Deco/Geometric** | Symmetry, gold accents, elegant patterns |
| **Soft/Pastel** | Gentle gradients, rounded corners, calm |
| **Industrial/Utilitarian** | Exposed grids, functional beauty |

## Visual Elements

### Layout & Space
- **Unexpected layouts**: Asymmetry, overlap, diagonal flow
- **Grid-breaking elements**: Items that defy conventional alignment
- **Generous negative space** OR **controlled density** (match your aesthetic)
- **Scroll-triggered reveals**: Content that animates into view
- **Interactive hover states**: Meaningful responses to user interaction

### Atmosphere & Depth
Create rich visual depth with:
- Gradient meshes and complex color gradients
- Noise textures and grain overlays
- Geometric patterns and abstract shapes
- Layered transparencies
- Dramatic shadows and highlights
- Decorative borders and dividers
- Custom cursors and micro-interactions

### Typography
- **Custom font pairings**: Sans + serif combinations
- **Variable fonts**: Weight and width animations
- **Dramatic scale contrast**: Huge headlines, refined body text
- **Text effects**: Gradients, outlines, shadows, masks
- **Animated text**: Reveals, scrambles, morphs

### Color
- **Bold palette choices**: Beyond safe corporate colors
- **Gradient sophistication**: Multi-stop, angled, radial
- **Dark mode excellence**: Not just inverted, designed dark
- **Accent colors with purpose**: Guide attention deliberately
- **Color animations**: Subtle hue shifts, hover transitions

### Motion & Animation
- **Meaningful motion**: Every animation serves a purpose
- **Physics-based easing**: Natural, satisfying movement
- **Staggered animations**: Choreographed sequences
- **Scroll-driven animations**: Parallax, reveals, transforms
- **Micro-interactions**: Button states, toggles, feedback

## Implementation Complexity

Match implementation complexity to your aesthetic vision:

- **Maximalist designs** → Elaborate code with extensive animations, layered effects, multiple interactive states
- **Minimalist designs** → Restrained code with precision, subtle animations, perfect spacing
- **Editorial designs** → Typography-focused with dramatic scale and refined layouts
- **Playful designs** → Bouncy physics, unexpected behaviors, delightful surprises

## Technical Considerations

### Framework Compatibility
Works exceptionally well with:
- React + CSS-in-JS (styled-components, Emotion)
- React + Tailwind CSS
- Vue.js + Scoped CSS
- Vanilla CSS with modern features

### Performance
- Use `will-change` sparingly for animated elements
- Prefer CSS transforms over layout-triggering properties
- Implement intersection observers for scroll animations
- Lazy load decorative elements below the fold

### Accessibility
- Maintain color contrast ratios (WCAG AA minimum)
- Provide `prefers-reduced-motion` alternatives
- Ensure keyboard navigation works beautifully
- Include focus states that match the design language

## Creative Reminders

> [!IMPORTANT]
> You are capable of extraordinary creative work. Think outside the box for a distinctive vision.

- Don't default to safe, generic patterns
- Push boundaries while maintaining usability
- Let the aesthetic drive the technical implementation
- Every pixel should feel intentional
- Create designs that users want to screenshot and share

## Example Aesthetic Applications

### Landing Page (Luxury)
```
- Large hero with slow parallax background
- Refined serif typography with subtle letter-spacing
- Gold accent color used sparingly
- Smooth scroll with momentum
- Hover effects that feel premium
```

### Dashboard (Minimal)
```
- Extreme whitespace
- Monochromatic with single accent
- Data visualizations as art
- Subtle shadows for depth
- Animations only for state changes
```

### Creative Portfolio (Maximalist)
```
- Overlapping elements and images
- Mixed media: 3D, video, illustrations
- Chaotic but controlled grid
- Bold color clashes that work
- Interactive cursor effects
```