Frontend Design
Create distinctive, production-grade interfaces avoiding generic "AI slop" aesthetics.
When to Use
- Building UI with React frameworks (Next.js, Vite, Remix)
- Creating visually distinctive, memorable interfaces
- Implementing accessible components with shadcn/ui
- Styling with Tailwind CSS v4
- Adding animations and micro-interactions
- Creating visual designs, posters, brand materials
Reference Documentation
Tailwind CSS v4.1
./references/tailwind/v4-config.md - Installation, @theme, CSS-first config./references/tailwind/v4-features.md - Container queries, gradients, masks, text shadows./references/tailwind/utilities-layout.md - Display, flex, grid, position./references/tailwind/utilities-styling.md - Spacing, typography, colors, borders./references/tailwind/responsive.md - Breakpoints, mobile-first, container queries
Search: @theme, @container, OKLCH, mask-, text-shadow
shadcn/ui (CLI v3.6)
./references/shadcn/setup.md - Installation, visual styles, component list./references/shadcn/core-components.md - Button, Card, Dialog, Select, Tabs, Toast./references/shadcn/form-components.md - Form, Field, Input Group, 2026 components./references/shadcn/theming.md - CSS variables, OKLCH, dark mode./references/shadcn/accessibility.md - ARIA, keyboard, screen reader
Search: Field, InputGroup, Spinner, ButtonGroup, next-themes
Animation (Motion + Tailwind)
./references/animation/motion-core.md - Core API, variants, gestures, layout animations./references/animation/motion-advanced.md - AnimatePresence, scroll, orchestration, TypeScript
Stack:
| Animation Type |
Tool |
| Hover/transitions |
Tailwind CSS (transition-*) |
| shadcn states |
tailwindcss-animate (built-in) |
| Gestures/layout/exit |
Motion (motion/react) |
| Complex SVG morphing |
anime.js v4 (niche only) |
Visual Design
./references/canvas/philosophy.md - Design movements, core principles./references/canvas/execution.md - Multi-page systems, quality standards
For sophisticated compositions: posters, brand materials, design systems.
Design Thinking
Before coding, commit to BOLD aesthetic direction:
- Purpose: What problem? Who uses it?
- Tone: Pick extreme - brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
- Differentiation: What makes this UNFORGETTABLE?
Bold maximalism and refined minimalism both work. Key is intentionality.
Anti-Patterns (NEVER)
- Overused fonts: Inter, Roboto, Arial, system fonts, Space Grotesk
- Cliched colors: purple gradients on white
- Predictable layouts and component patterns
- Cookie-cutter design lacking character
- Generic AI-generated aesthetics
Best Practices
- Accessibility First: Radix primitives, focus states, semantic HTML
- Mobile-First: Start mobile, layer responsive variants
- Design Tokens: Use
@theme for spacing, colors, typography
- Dark Mode: Apply dark variants to all themed elements
- Performance: Automatic CSS purging, avoid dynamic class names
- TypeScript: Full type safety
- Expert Craftsmanship: Every detail matters
Core Stack Summary
Tailwind v4.1: CSS-first config via @theme. Single @import "tailwindcss". OKLCH colors. Container queries built-in.
shadcn/ui v3.6: Copy-paste Radix components. Visual styles: Vega/Nova/Maia/Lyra/Mira. New: Field, InputGroup, Spinner, ButtonGroup.
Motion: import { motion, AnimatePresence } from 'motion/react'. Declarative React animations. Use tailwindcss-animate for shadcn states.
Color
Use OKLCH for vivid colors. Dominant colors with sharp accents:
@theme {
--color-primary-500: oklch(0.55 0.22 264);
--color-accent: oklch(0.75 0.18 45);
}
Motion
Primary: Motion for React animations. Fallback: CSS @starting-style for simple enter/exit.
import { motion, AnimatePresence } from 'motion/react';
// Basic animation
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
// Exit animations
<AnimatePresence>
{show && <motion.div exit={{ opacity: 0 }} />}
</AnimatePresence>
// Layout animations
<motion.div layout />
// Gestures
<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} />
CSS fallback (no JS):
dialog[open] {
opacity: 1;
@starting-style {
opacity: 0;
transform: scale(0.95);
}
}
Spatial Composition
Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds
Create atmosphere: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.
1---2name: frontend-design-133description: Create distinctive, production-grade frontend interfaces. Use when building web components, pages, or applications with React-based frameworks. Includes Tailwind CSS v4, shadcn/ui components, Motion animations, and visual design philosophy for avoiding generic AI aesthetics.4---5
6# Frontend Design
7
8Create distinctive, production-grade interfaces avoiding generic "AI slop" aesthetics.
9
10## When to Use
11
12- Building UI with React frameworks (Next.js, Vite, Remix)
13- Creating visually distinctive, memorable interfaces
14- Implementing accessible components with shadcn/ui
15- Styling with Tailwind CSS v4
16- Adding animations and micro-interactions
17- Creating visual designs, posters, brand materials
18
19## Reference Documentation
20
21### Tailwind CSS v4.1
22
23- `./references/tailwind/v4-config.md` - Installation, @theme, CSS-first config
24- `./references/tailwind/v4-features.md` - Container queries, gradients, masks, text shadows
25- `./references/tailwind/utilities-layout.md` - Display, flex, grid, position
26- `./references/tailwind/utilities-styling.md` - Spacing, typography, colors, borders
27- `./references/tailwind/responsive.md` - Breakpoints, mobile-first, container queries
28
29Search: `@theme`, `@container`, `OKLCH`, `mask-`, `text-shadow`
30
31### shadcn/ui (CLI v3.6)
32
33- `./references/shadcn/setup.md` - Installation, visual styles, component list
34- `./references/shadcn/core-components.md` - Button, Card, Dialog, Select, Tabs, Toast
35- `./references/shadcn/form-components.md` - Form, Field, Input Group, 2026 components
36- `./references/shadcn/theming.md` - CSS variables, OKLCH, dark mode
37- `./references/shadcn/accessibility.md` - ARIA, keyboard, screen reader
38
39Search: `Field`, `InputGroup`, `Spinner`, `ButtonGroup`, `next-themes`
40
41### Animation (Motion + Tailwind)
42
43- `./references/animation/motion-core.md` - Core API, variants, gestures, layout animations
44- `./references/animation/motion-advanced.md` - AnimatePresence, scroll, orchestration, TypeScript
45
46**Stack**:
47| Animation Type | Tool |
48|----------------|------|
49| Hover/transitions | Tailwind CSS (`transition-*`) |
50| shadcn states | `tailwindcss-animate` (built-in) |
51| Gestures/layout/exit | Motion (`motion/react`) |
52| Complex SVG morphing | anime.js v4 (niche only) |
53
54### Visual Design
55
56- `./references/canvas/philosophy.md` - Design movements, core principles
57- `./references/canvas/execution.md` - Multi-page systems, quality standards
58
59For sophisticated compositions: posters, brand materials, design systems.
60
61## Design Thinking
62
63Before coding, commit to BOLD aesthetic direction:
64
65- **Purpose**: What problem? Who uses it?
66- **Tone**: Pick extreme - brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
67- **Differentiation**: What makes this UNFORGETTABLE?
68
69Bold maximalism and refined minimalism both work. Key is intentionality.
70
71## Anti-Patterns (NEVER)
72
73- Overused fonts: Inter, Roboto, Arial, system fonts, Space Grotesk
74- Cliched colors: purple gradients on white
75- Predictable layouts and component patterns
76- Cookie-cutter design lacking character
77- Generic AI-generated aesthetics
78
79## Best Practices
80
811. **Accessibility First**: Radix primitives, focus states, semantic HTML
822. **Mobile-First**: Start mobile, layer responsive variants
833. **Design Tokens**: Use `@theme` for spacing, colors, typography
844. **Dark Mode**: Apply dark variants to all themed elements
855. **Performance**: Automatic CSS purging, avoid dynamic class names
866. **TypeScript**: Full type safety
877. **Expert Craftsmanship**: Every detail matters
88
89## Core Stack Summary
90
91**Tailwind v4.1**: CSS-first config via `@theme`. Single `@import "tailwindcss"`. OKLCH colors. Container queries built-in.
92
93**shadcn/ui v3.6**: Copy-paste Radix components. Visual styles: Vega/Nova/Maia/Lyra/Mira. New: Field, InputGroup, Spinner, ButtonGroup.
94
95**Motion**: `import { motion, AnimatePresence } from 'motion/react'`. Declarative React animations. Use `tailwindcss-animate` for shadcn states.
96
97## Color
98
99Use OKLCH for vivid colors. Dominant colors with sharp accents:
100
101```css
102@theme {
103 --color-primary-500: oklch(0.55 0.22 264);
104 --color-accent: oklch(0.75 0.18 45);
105}
106```
107
108## Motion
109
110**Primary**: Motion for React animations. **Fallback**: CSS `@starting-style` for simple enter/exit.
111
112```tsx
113import { motion, AnimatePresence } from 'motion/react';
114
115// Basic animation
116<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
117
118// Exit animations
119<AnimatePresence>
120 {show && <motion.div exit={{ opacity: 0 }} />}
121</AnimatePresence>
122
123// Layout animations
124<motion.div layout />
125
126// Gestures
127<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} />
128```
129
130CSS fallback (no JS):
131
132```css
133dialog[open] {
134 opacity: 1;
135 @starting-style {
136 opacity: 0;
137 transform: scale(0.95);
138 }
139}
140```
141
142## Spatial Composition
143
144Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
145
146## Backgrounds
147
148Create atmosphere: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.
diegosouzapw