frontend-design

Frontend Design Skill

Use this skill when creating UI components, landing pages, dashboards, or any frontend design work.

Design Workflow

Follow this structured approach for UI design:

1. Layout Design — Think through component structure, create ASCII wireframes
2. Theme Design — Define colors, fonts, spacing, shadows
3. Animation Design — Plan micro-interactions and transitions
4. Implementation — Generate the actual code

1. Layout Design

Before coding, sketch the layout in ASCII format:

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

2. Theme Guidelines

Color Rules:

• NEVER use generic bootstrap-style blue (#007bff) — it looks dated
• Prefer oklch() for modern color definitions
• Use semantic color variables (--primary, --secondary, --muted, etc.)
• Consider both light and dark mode from the start

Font Selection (Google Fonts):

Sans-serif: Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk
Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono
Serif: Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville
Display: Architects Daughter, Oxanium

Spacing & Shadows:

• Use consistent spacing scale (0.25rem base)
• Shadows should be subtle — avoid heavy drop shadows
• Consider using oklch() for shadow colors too

3. Theme Patterns

Modern Dark Mode (Vercel/Linear style):

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.970 0 0);
  --muted: oklch(0.970 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
  --font-sans: Inter, system-ui, sans-serif;
}