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
1---2name: frontend-design-213description: Create distinctive, production-grade frontend interfaces with high design quality. Avoids generic AI aesthetics in favor of bold, memorable designs.4---5
6# Frontend Design Skill
7
8This 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.
9
10## Core Principles
11
12The code you produce should be:
13- **Production-grade**: Functional and ready for deployment
14- **Visually striking**: Immediately impressive and engaging
15- **Memorable**: Distinctive and unforgettable
16- **Cohesive**: Clear aesthetic point-of-view throughout
17- **Refined**: Meticulously polished in every detail
18
19## Aesthetic Direction
20
21Before designing, choose an extreme aesthetic to inspire unique designs:
22
23| Style | Description |
24|-------|-------------|
25| **Minimal** | Extreme restraint, essential elements only |
26| **Maximalist Chaos** | Bold, layered, overwhelming sensory experience |
27| **Retro-Futuristic** | Nostalgic meets speculative technology |
28| **Organic/Natural** | Flowing forms, natural textures, biophilic |
29| **Luxury/Refined** | Premium materials, sophisticated details |
30| **Playful/Toy-like** | Fun, bouncy, childlike wonder |
31| **Editorial/Magazine** | Typography-driven, dramatic layouts |
32| **Brutalist/Raw** | Exposed structure, harsh contrasts |
33| **Art Deco/Geometric** | Symmetry, gold accents, elegant patterns |
34| **Soft/Pastel** | Gentle gradients, rounded corners, calm |
35| **Industrial/Utilitarian** | Exposed grids, functional beauty |
36
37## Visual Elements
38
39### Layout & Space
40- **Unexpected layouts**: Asymmetry, overlap, diagonal flow
41- **Grid-breaking elements**: Items that defy conventional alignment
42- **Generous negative space** OR **controlled density** (match your aesthetic)
43- **Scroll-triggered reveals**: Content that animates into view
44- **Interactive hover states**: Meaningful responses to user interaction
45
46### Atmosphere & Depth
47Create rich visual depth with:
48- Gradient meshes and complex color gradients
49- Noise textures and grain overlays
50- Geometric patterns and abstract shapes
51- Layered transparencies
52- Dramatic shadows and highlights
53- Decorative borders and dividers
54- Custom cursors and micro-interactions
55
56### Typography
57- **Custom font pairings**: Sans + serif combinations
58- **Variable fonts**: Weight and width animations
59- **Dramatic scale contrast**: Huge headlines, refined body text
60- **Text effects**: Gradients, outlines, shadows, masks
61- **Animated text**: Reveals, scrambles, morphs
62
63### Color
64- **Bold palette choices**: Beyond safe corporate colors
65- **Gradient sophistication**: Multi-stop, angled, radial
66- **Dark mode excellence**: Not just inverted, designed dark
67- **Accent colors with purpose**: Guide attention deliberately
68- **Color animations**: Subtle hue shifts, hover transitions
69
70### Motion & Animation
71- **Meaningful motion**: Every animation serves a purpose
72- **Physics-based easing**: Natural, satisfying movement
73- **Staggered animations**: Choreographed sequences
74- **Scroll-driven animations**: Parallax, reveals, transforms
75- **Micro-interactions**: Button states, toggles, feedback
76
77## Implementation Complexity
78
79Match implementation complexity to your aesthetic vision:
80
81- **Maximalist designs** → Elaborate code with extensive animations, layered effects, multiple interactive states
82- **Minimalist designs** → Restrained code with precision, subtle animations, perfect spacing
83- **Editorial designs** → Typography-focused with dramatic scale and refined layouts
84- **Playful designs** → Bouncy physics, unexpected behaviors, delightful surprises
85
86## Technical Considerations
87
88### Framework Compatibility
89Works exceptionally well with:
90- React + CSS-in-JS (styled-components, Emotion)
91- React + Tailwind CSS
92- Vue.js + Scoped CSS
93- Vanilla CSS with modern features
94
95### Performance
96- Use `will-change` sparingly for animated elements
97- Prefer CSS transforms over layout-triggering properties
98- Implement intersection observers for scroll animations
99- Lazy load decorative elements below the fold
100
101### Accessibility
102- Maintain color contrast ratios (WCAG AA minimum)
103- Provide `prefers-reduced-motion` alternatives
104- Ensure keyboard navigation works beautifully
105- Include focus states that match the design language
106
107## Creative Reminders
108
109> [!IMPORTANT]
110> You are capable of extraordinary creative work. Think outside the box for a distinctive vision.
111
112- Don't default to safe, generic patterns
113- Push boundaries while maintaining usability
114- Let the aesthetic drive the technical implementation
115- Every pixel should feel intentional
116- Create designs that users want to screenshot and share
117
118## Example Aesthetic Applications
119
120### Landing Page (Luxury)
121```
122- Large hero with slow parallax background
123- Refined serif typography with subtle letter-spacing
124- Gold accent color used sparingly
125- Smooth scroll with momentum
126- Hover effects that feel premium
127```
128
129### Dashboard (Minimal)
130```
131- Extreme whitespace
132- Monochromatic with single accent
133- Data visualizations as art
134- Subtle shadows for depth
135- Animations only for state changes
136```
137
138### Creative Portfolio (Maximalist)
139```
140- Overlapping elements and images
141- Mixed media: 3D, video, illustrations
142- Chaotic but controlled grid
143- Bold color clashes that work
144- Interactive cursor effects
145```
diegosouzapw