frontend-design

What this skill does

This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic detail.

## Example prompts

- "Build the hero section from the brief"
- "Create a card component in a Scandinavian style"
- "I want this to feel like a Japanese magazine. Build the layout."
- "Build the settings page. Use whatever style fits."

## Before You Write Any Code

1. **Explore the existing codebase first.** Scan specifically for:
   - **Component directories**: `components/`, `ui/`, `shared/` and list every component by name and its props/API
   - **CSS variables / tokens**: files named `tokens.css`, `variables.css`, `theme.css`, or `:root` declarations with custom properties
   - **Tailwind config**: `tailwind.config.js` or `tailwind.config.ts`, check `theme.extend` for custom values
   - **UI framework themes**: Material UI `createTheme`, Chakra `extendTheme`, shadcn `globals.css` and `components.json`
   - **Storybook**: `.storybook/` directory or `*.stories.*` files indicating documented components
   - **Font loading**: Google Fonts links, `@font-face` declarations, font imports
   - **Layout patterns**: how existing pages handle grid, containers, breakpoints, and spacing
   - **Package.json UI dependencies**: tailwindcss, @mui/material, @chakra-ui/react, @radix-ui, lucide-react, framer-motion, etc.
   - If components exist that match or partially match what you need to build, extend or compose them. Do not create duplicates.

2. **Understand the context:**
   - What problem does this interface solve? Who uses it?
   - What is the intended emotional tone?
   - What are the hard constraints (framework, devices, performance, accessibility)?

3. **Commit to an aesthetic direction.** Either the user names one (see philosophies below) or you choose one that fits the context. State your choice and why before writing code.

## Aesthetic Philosophies

When the user names a philosophy or describes a vibe, use these as concrete implementation guides. Each philosophy defines typography, color, layout, spacing, motion, and detail treatment.

### Dieter Rams (Functionalist)
Less but better. Every element earns its place. Nothing decorative without function.
- **Typography**: Clean sans-serif (Helvetica Neue, Suisse Intl, Akkurat). Tight letterspacing on headings. Generous line height on body. One size scale, used strictly.
- **Color**: Restrained. Monochromatic with a single functional accent. White or light grey backgrounds. Color is information, not decoration.
- **Layout**: Strict grid. Clear functional hierarchy. Components aligned to a spatial system. No asymmetry for its own sake.
- **Spacing**: Consistent, mathematical scale (4px/8px base). Generous padding. Breathing room between elements.
- **Motion**: Minimal. Purposeful transitions only (state changes, reveals). No decorative animation.
- **Details**: Subtle borders and dividers over shadows. Precise alignment. Rounded corners used sparingly and consistently.

### Swiss / International Typographic
Objectivity through structure. The grid is sacred. Content is king.
- **Typography**: Strong sans-serifs (Neue Haas Grotesk, Univers, Aktiv Grotesk). Dramatic scale contrast between headings and body. All-caps subheadings with generous letterspacing.
- **Color**: High contrast. Black, white, and one primary color. Bold color blocks as compositional elements.
- **Layout**: Rigid multi-column grid. Asymmetric balance. Text and image in dialogue. Alignment across elements is non-negotiable.
- **Spacing**: Defined by the grid module. Gutters are part of the design, not afterthought.
- **Motion**: Page transitions and scroll-triggered reveals that respect the grid. No playful bounce.
- **Details**: Rules (horizontal lines) as structural elements. No gradients. No shadows. Flatness is the point.

### Japanese Minimalism (Ma)
Negative space is content. Restraint communicates sophistication. Quiet over loud.
- **Typography**: Thin-weight sans-serifs or elegant serifs (Noto Sans, Cormorant). Generous line height (1.8-2.0). Small body size with large whitespace margins.
- **Color**: Muted naturals (warm greys, stone, sage, washi). Subtle tonal shifts over hard contrasts. Near-monochrome.
- **Layout**: Asymmetric but balanced. Off-center content. Large empty areas are intentional. Content floats in space.
- **Spacing**: Extreme whitespace. Padding and margins 2-3x what feels "normal." Elements breathe.
- **Motion**: Slow, gentle fades (400-600ms). No bounce, no overshoot. Opacity transitions over position shifts.
- **Details**: Hairline borders. Subtle texture (paper grain, linen). No sharp shadows. Soft, diffused effects.

### Brutalist / Raw
Structure is visible. No polish. Anti-aesthetic is the aesthetic.
- **Typography**: System fonts, monospace (JetBrains Mono, IBM Plex Mono, Courier), or aggressive display faces. Mixed sizes. Text as texture.
- **Color**: Black and white primary. If color, it is raw and clashing (construction yellow, hazard orange, terminal green). No gradients.
- **Layout**: Visible borders. Box model exposed. Stacked blocks. Deliberate roughness. Content first, beauty never.
- **Spacing**: Tight or intentionally uneven. Padding that feels compressed.
- **Motion**: None, or jarring (instant state changes, hard cuts). No easing.
- **Details**: Visible outlines. Default browser form elements can be intentional. Text-only interfaces. No icons unless functional.

### Scandinavian
Warmth plus restraint. Functional beauty. Accessible by default.
- **Typography**: Rounded, friendly sans-serifs (Nunito, Poppins, Circular, Cera Pro). Medium weights. Comfortable reading sizes.
- **Color**: Natural palette. Warm whites, soft blues, muted greens, clay. Pastel accents. No pure black (use charcoal).
- **Layout**: Clean and open. Card-based. Rounded corners (8-12px). Comfortable, generous layouts.
- **Spacing**: Generous but not extreme. Everything feels approachable and uncluttered.
- **Motion**: Gentle, natural easing. Subtle hover lifts. Content that settles into place.
- **Details**: Soft shadows (large blur, low opacity). Rounded elements. Warm undertones in greys. Illustration-friendly.

### Art Deco / Geometric
Bold symmetry. Decorative precision. Statement and luxury.
- **Typography**: Geometric display faces (Futura, Poiret One, Josefin Sans). All-caps headlines with extreme letterspacing. Serif body text for contrast.
- **Color**: Rich and deep. Gold/champagne, emerald, navy, burgundy, black. Metallic accents (gold gradients, shimmer effects).
- **Layout**: Symmetrical and centered. Strong vertical axis. Decorative frames and borders. Layered depth.
- **Spacing**: Structured and formal. Padding is architectural.
- **Motion**: Elegant reveals. Staggered entrance animations. Parallax depth.
- **Details**: Geometric patterns (chevrons, sunbursts, fan shapes). Ornamental borders. Texture (marble, brushed metal). Statement typography at hero scale.

### Neo-Memphis
Playful chaos. Anti-corporate. Shapes as characters.
- **Typography**: Mix of weights and styles. Clashing fonts is intentional. Oversized headlines. Text at angles.
- **Color**: Bold primaries and neons. Clashing combinations (pink and yellow, blue and orange). No muted tones. Flat color, no gradients.
- **Layout**: Broken grid. Overlapping elements. Shapes (circles, triangles, squiggles) as compositional elements. Asymmetric on purpose.
- **Spacing**: Dense in some areas, empty in others. Rhythm is irregular.
- **Motion**: Bouncy, playful. Exaggerated hover effects. Elements that wiggle, rotate, or pop.
- **Details**: Thick borders. Geometric shapes as decoration. Patterns (dots, dashes, zigzags). Drop shadows with hard edges and bright colors.

### Editorial / Magazine
Content-led design. Typography does the heavy lifting. Every page is a spread.
- **Typography**: Display serif for headlines (Playfair Display, Fraunces, Instrument Serif). Clean sans for body (DM Sans, Source Sa