frontend-design

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