# V0 > Use this skill whenever building, editing, or reviewing user-facing software with v0 — web apps, dashboards, marketing sites, component libraries, or any code change that produces visual output. Triggers on requests to "build a UI", "design a page", "make a component", "improve the look", "polish this", "make it production-ready", or whenever scaffolding a new app/screen/feature with visible surface area. Encodes v0's opinionated defaults for Tailwind CSS patterns, shadcn/ui components, design tokens, typography, spacing, color, motion, accessibility, and the component patterns that hold up under real users. - Skill: `headline-design/v0` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add headline-design/v0` - Raw SKILL.md: https://api.skillmd.com/api/skills/headline-design/v0/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: headline-design (https://skillmd.com/u/headline-design) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/headline-design/v0 --- # v0 Design & Development Skill A comprehensive guide to creating professional-grade, visually stunning web applications with exceptional UI/UX. --- ## Table of Contents 1. [Design Philosophy](#design-philosophy) 2. [Color System](#color-system) 3. [Typography](#typography) 4. [Layout & Spacing](#layout--spacing) 5. [Component Architecture](#component-architecture) 6. [Tailwind CSS Patterns](#tailwind-css-patterns) 7. [Accessibility](#accessibility) 8. [Performance](#performance) 9. [Code Organization](#code-organization) 10. [UI/UX Principles](#uiux-principles) 11. [Common Patterns](#common-patterns) 12. [Anti-Patterns to Avoid](#anti-patterns-to-avoid) --- ## Design Philosophy ### Core Principles 1. **Restraint over excess** — Great design is about what you leave out, not what you add 2. **Clarity over cleverness** — Users should understand interfaces instantly 3. **Consistency over novelty** — Predictable patterns reduce cognitive load 4. **Purpose over decoration** — Every element must earn its place 5. **Ship interesting, never ugly** — Balance creativity with polish ### The v0 Aesthetic - Clean, modern interfaces with generous whitespace - Subtle shadows and borders that create depth without distraction - Smooth, purposeful animations that guide attention - Professional color palettes that feel cohesive - Typography that establishes clear hierarchy --- ## Color System ### The 3-5 Color Rule **ALWAYS use exactly 3-5 colors total.** This constraint forces cohesion. #### Required Structure ``` 1 Primary Brand Color → CTAs, key actions, brand identity 2-3 Neutrals → Backgrounds, text, borders 1-2 Accent Colors → Status indicators, highlights, secondary actions ``` #### Color Selection Guidelines | Use Case | Recommendation | |----------|----------------| | Primary actions | Saturated, accessible brand color | | Backgrounds | Off-whites, soft grays (never pure white for large areas) | | Text | Near-black (#0a0a0a to #1a1a1a), not pure black | | Borders/Dividers | Very subtle grays (opacity 10-20%) | | Success states | Greens in the teal family | | Error states | Warm reds, never aggressive | | Warning states | Amber/orange tones | #### Color Temperature Rules - **DO** use analogous colors: blue→teal, purple→pink, orange→red - **DON'T** mix opposing temperatures: pink→green, orange→blue, red→cyan #### Gradient Rules - **Avoid gradients unless explicitly requested** — solid colors are cleaner - If gradients are necessary: - Use only as subtle accents, never for primary elements - Maximum 2-3 color stops - Use analogous colors only - Consider gradient direction (usually top-to-bottom or diagonal) #### Design Token Structure Always use semantic design tokens in CSS variables: ```css :root { /* Backgrounds */ --background: 0 0% 100%; --foreground: 0 0% 3.9%; /* Cards & Surfaces */ --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; /* Primary Actions */ --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; /* Secondary Actions */ --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; /* Muted Elements */ --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; /* Accents */ --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; /* Destructive Actions */ --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; /* Borders & Inputs */ --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; /* Radius */ --radius: 0.5rem; } ``` **Critical Rule:** Never use direct colors like `text-white`, `bg-black`. Everything must be themed via tokens. --- ## Typography ### The 2 Font Maximum Rule **ALWAYS limit to maximum 2 font families.** More fonts create visual chaos. #### Font Pairing Strategy ``` Headings: Display or Sans-serif with personality (multiple weights) Body: Highly readable sans-serif or serif ``` #### Recommended Pairings | Style | Headings | Body | |-------|----------|------| | Modern Tech | Inter, Geist | Inter, Geist | | Editorial | Playfair Display | Source Sans Pro | | Startup | Cal Sans, Manrope | Inter | | Corporate | Outfit | System UI | | Creative | Space Grotesk | DM Sans | #### Typography Scale Use a consistent scale with clear hierarchy: ```css /* Recommended Tailwind Classes */ text-xs → 12px → Fine print, labels text-sm → 14px → Secondary text, captions text-base → 16px → Body text (minimum for readability) text-lg → 18px → Lead paragraphs text-xl → 20px → Section headers text-2xl → 24px → Card titles text-3xl → 30px → Page sections text-4xl → 36px → Hero subheadings text-5xl → 48px → Hero headings text-6xl+ → 60px+ → Display headings (use sparingly) ``` #### Line Height Rules - **Body text:** `leading-relaxed` (1.625) or `leading-6` to `leading-7` - **Headings:** `leading-tight` (1.25) or `leading-snug` (1.375) - **Never** use default line-height for body text — it's too tight #### Text Wrapping - Wrap titles in `text-balance` for optimal line breaks - Use `text-pretty` for important copy - Set `max-w-prose` or `max-w-2xl` for readable line lengths #### Font Implementation in Next.js ```tsx // layout.tsx import { Inter, Playfair_Display } from 'next/font/google' const inter = Inter({ subsets: ['latin'], variable: '--font-sans' }) const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-serif' }) export default function RootLayout({ children }) { return ( {children} ) } ``` ```js // tailwind.config.js module.exports = { theme: { extend: { fontFamily: { sans: ['var(--font-sans)'], serif: ['var(--font-serif)'], }, }, }, } ``` --- ## Layout & Spacing ### Mobile-First Design **ALWAYS design mobile-first, then enhance for larger screens.** ```tsx // ✅ Mobile-first approach
// ❌ Desktop-first (avoid)
``` ### Layout Method Priority Use this hierarchy for layout decisions: 1. **Flexbox** — Most layouts (navbars, cards, simple grids) 2. **CSS Grid** — Complex 2D layouts, bento grids, dashboards 3. **Absolute positioning** — Only when necessary (modals, tooltips) 4. **Never use floats** ### Spacing Scale Use Tailwind's spacing scale consistently: ``` 4px = p-1 → Tiny gaps (icon padding) 8px = p-2 → Small gaps (button padding) 12px = p-3 → Compact spacing 16px = p-4 → Standard spacing (most common) 24px = p-6 → Comfortable spacing 32px = p-8 → Section spacing 48px = p-12 → Large section gaps 64px = p-16 → Hero spacing 96px = p-24 → Major section dividers ``` ### Spacing Rules ```tsx // ✅ Use gap for flex/grid spacing
// ✅ Use padding for container spacing
// ❌ Avoid space-* utilities
// Less flexible // ❌ Never mix gap and margin on same element
// Pick one approach ``` ### Container Patterns ```tsx // Standard content container
// Narrow content (articles, forms)
// Full-bleed with contained content
``` ### Responsive Breakpoints ``` sm: 640px → Large phones, small tablets md: 768px → Tablets lg: 1024px → Small laptops, tablets landscape xl: 1280px → Desktops 2xl: 1536px → Large desktops ``` --- ## Component Architecture ### File Structure ``` components/ ├── ui/ # Base shadcn components (don't modify) │ ├── button.tsx │ ├── card.tsx │ └── ... ├── [feature]/ # Feature-specific components │ ├── feature-header.tsx │ ├── feature-card.tsx │ └── feature-list.tsx ├── layout/ # Layout components │ ├── header.tsx │ ├── footer.tsx │ └── sidebar.tsx └── shared/ # Shared/common components ├── logo.tsx ├── theme-toggle.tsx └── loading-state.tsx ``` ### Component Design Principles 1. **Single Responsibility** — Each component does one thing well 2. **Composition over Configuration** — Build complex UIs from simple parts 3. **Props for Customization** — Use props, not hardcoded values 4. **Sensible Defaults** — Work out of the box, customizable when needed ### Component Template ```tsx import { cn } from "@/lib/utils" interface FeatureCardProps { title: string description: string icon?: React.ReactNode className?: string variant?: "default" | "highlighted" } export function FeatureCard({ title, description, icon, className, variant = "default" }: FeatureCardProps) { return (
{icon && (
{icon}
)}

{title}

{description}

) } ``` ### Page Structure ```tsx // app/feature/page.tsx import { FeatureHero } from "@/components/feature/feature-hero" import { FeatureGrid } from "@/components/feature/feature-grid" import { FeatureCTA } from "@/components/feature/feature-cta" export default function FeaturePage() { return (
) } ``` **Never create monolithic page files.** Split into logical components. --- ## Tailwind CSS Patterns ### Class Organization Order classes consistently: ```tsx className={cn( // 1. Layout (display, position, sizing) "flex items-center justify-between", "relative w-full max-w-md", // 2. Spacing (margin, padding, gap) "p-4 gap-2", // 3. Typography "text-sm font-medium", // 4. Colors & Backgrounds "bg-background text-foreground", // 5. Borders & Shadows "rounded-lg border shadow-sm", // 6. Transitions & Animations "transition-colors duration-200", // 7. States (hover, focus, active) "hover:bg-accent focus:ring-2", // 8. Responsive overrides "md:p-6 lg:flex-row" )} ``` ### Common Utility Patterns ```tsx // Centering "flex items-center justify-center" "grid place-items-center" // Card pattern "rounded-lg border bg-card p-6 shadow-sm" // Interactive element "cursor-pointer transition-colors hover:bg-accent" // Focus ring (accessibility) "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" // Truncation "truncate" // Single line "line-clamp-2" // Multi-line (2 lines) // Aspect ratios "aspect-video" // 16:9 "aspect-square" // 1:1 // Backdrop blur (modals, overlays) "bg-background/80 backdrop-blur-sm" // Dividers "divide-y divide-border" // Screen reader only "sr-only" ``` ### Responsive Design Patterns ```tsx // Stack to row
// Grid columns
// Hide/show
// Show on md+
// Hide on md+ // Responsive text

// Responsive spacing
``` ### Animation Patterns ```tsx // Subtle hover lift "transition-transform hover:-translate-y-1" // Fade in on hover "opacity-0 group-hover:opacity-100 transition-opacity" // Scale on hover "transition-transform hover:scale-105" // Color transition "transition-colors hover:bg-accent" // Combined "transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5" ``` --- ## Accessibility ### Required Practices #### Semantic HTML ```tsx // ✅ Correct

Page Title

Section

// ❌ Avoid
``` #### Focus Management ```tsx // Visible focus states "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" // Focus within (for form groups) "focus-within:ring-2 focus-within:ring-ring" // Skip link Skip to content ``` #### Screen Reader Support ```tsx // Hidden but accessible text Open menu // Aria labels // Live regions for dynamic content
{statusMessage}
``` #### Image Accessibility ```tsx // Informative images Sales increased 25% in Q4 2024 // Decorative images // Complex images
System architecture diagram
Detailed description of the architecture...
``` #### Color Contrast - **Text:** Minimum 4.5:1 contrast ratio (WCAG AA) - **Large text:** Minimum 3:1 contrast ratio - **Interactive elements:** Clear visual distinction - **Never rely on color alone** to convey information #### Keyboard Navigation ```tsx // Interactive elements must be keyboard accessible // ✅ Naturally focusable
Clickable
// ❌ Not keyboard accessible // If you must use a div:
e.key === 'Enter' && handleClick()} > Clickable
``` --- ## Performance ### Image Optimization ```tsx import Image from 'next/image' // Always use Next.js Image component Hero image description // Responsive images Description ``` ### Code Splitting ```tsx // Dynamic imports for heavy components import dynamic from 'next/dynamic' const HeavyChart = dynamic(() => import('@/components/heavy-chart'), { loading: () => , ssr: false // If client-only }) ``` ### Loading States ```tsx // Skeleton loading (preferred)
// Spinner for actions ``` ### Data Fetching ```tsx // ✅ Server Components for static data async function ProductList() { const products = await getProducts() return } // ✅ SWR for client-side data import useSWR from 'swr' function UserProfile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (isLoading) return if (error) return return } // ❌ Never fetch in useEffect useEffect(() => { fetch('/api/data').then(...) // Anti-pattern }, []) ``` --- ## Code Organization ### Project Structure ``` app/ ├── (marketing)/ # Route groups for layouts │ ├── page.tsx │ ├── about/ │ └── pricing/ ├── (dashboard)/ │ ├── layout.tsx │ └── dashboard/ ├── api/ │ └── [feature]/ │ └── route.ts ├── layout.tsx └── globals.css components/ ├── ui/ # shadcn components ├── [feature]/ # Feature components ├── layout/ # Layout components └── shared/ # Shared components lib/ ├── utils.ts # Utility functions ├── validations.ts # Zod schemas └── constants.ts # App constants hooks/ ├── use-[feature].ts └── use-media-query.ts types/ └── index.ts ``` ### Naming Conventions | Type | Convention | Example | |------|------------|---------| | Components | PascalCase | `FeatureCard.tsx` | | Files | kebab-case | `feature-card.tsx` | | Hooks | camelCase with use prefix | `useFeature.ts` | | Utilities | camelCase | `formatDate.ts` | | Types | PascalCase | `FeatureProps` | | Constants | SCREAMING_SNAKE_CASE | `MAX_FILE_SIZE` | | CSS variables | kebab-case | `--primary-color` | ### Import Organization ```tsx // 1. React/Next.js import { useState, useEffect } from 'react' import Image from 'next/image' import Link from 'next/link' // 2. Third-party libraries import { motion } from 'framer-motion' import { z } from 'zod' // 3. Internal components import { Button } from '@/components/ui/button' import { FeatureCard } from '@/components/feature/feature-card' // 4. Internal utilities/hooks import { cn } from '@/lib/utils' import { useFeature } from '@/hooks/use-feature' // 5. Types import type { Feature } from '@/types' ``` --- ## UI/UX Principles ### Visual Hierarchy 1. **Size** — Larger elements draw attention first 2. **Color** — Saturated colors stand out against neutrals 3. **Contrast** — High contrast creates focal points 4. **Spacing** — Whitespace isolates important elements 5. **Position** — Top-left to bottom-right reading pattern ### Interactive States Every interactive element needs these states: ```tsx // Button example // Success feedback
Changes saved successfully
// Error feedback

Error occurred

{error.message}

``` ### Empty States Never show blank screens. Always provide helpful empty states: ```tsx

No messages yet

When you receive messages, they'll appear here.

``` ### Micro-interactions Subtle animations that enhance UX: ```tsx // Hover lift effect "transition-transform duration-200 hover:-translate-y-1 hover:shadow-lg" // Button press effect "active:scale-[0.98] transition-transform" // Smooth reveals "animate-in fade-in slide-in-from-bottom-4 duration-300" // Skeleton pulse "animate-pulse" ``` --- ## Common Patterns ### Hero Section ```tsx

Your compelling headline here

Supporting text that elaborates on the headline and provides context.

``` ### Feature Grid ```tsx

Features

Everything you need to succeed.

{features.map((feature) => ( ))}
``` ### Card Grid ```tsx
{items.map((item) => (
{item.title}
{item.title} {item.description} ))}
``` ### Bento Grid ```tsx
{/* Large feature - spans 2 columns */}

Main Feature

{/* Regular items */}

Feature 2

Feature 3

{/* Wide item - spans 2 columns */}

Wide Feature

``` ### Form Layout ```tsx

We'll never share your email.

``` ### Navigation ```tsx
Brand
``` --- ## Anti-Patterns to Avoid ### Color Mistakes ```tsx // ❌ Too many colors className="bg-purple-500 text-pink-400 border-blue-300 shadow-green-200" // ❌ Direct colors instead of tokens className="bg-white text-black" // ❌ Purple/violet as primary (unless explicitly requested) className="bg-violet-600" // ❌ Clashing temperature gradients className="bg-gradient-to-r from-pink-500 to-green-500" // ✅ Semantic tokens className="bg-background text-foreground" ``` ### Typography Mistakes ```tsx // ❌ Too many fonts

// 4 fonts! // ❌ Tiny text className="text-xs" // Avoid for body text // ❌ No line-height consideration className="text-base" // Missing leading-* // ✅ Proper typography className="text-base leading-relaxed" ``` ### Layout Mistakes ```tsx // ❌ Desktop-first responsive className="w-1/3 sm:w-1/2 xs:w-full" // ❌ Using space-* utilities className="space-y-4" // ❌ Floats className="float-left" // ❌ Mixing gap and margin className="flex gap-4 mb-4" // ✅ Mobile-first with gap className="flex flex-col gap-4 md:flex-row" ``` ### Component Mistakes ```tsx // ❌ Monolithic page files (500+ lines) // ❌ Hardcoded values instead of props // ❌ Inline styles // ❌ Non-semantic HTML (div for everything) // ❌ Missing key props in lists // ❌ Fetching in useEffect // ✅ Split into components // ✅ Use props for customization // ✅ Tailwind classes // ✅ Semantic HTML // ✅ Proper key props // ✅ Server Components or SWR ``` ### Accessibility Mistakes ```tsx // ❌ Click handler on div

Click me
// ❌ Missing alt text // ❌ Color-only indication Error // ❌ Missing focus states // ✅ Descriptive alt text Team meeting in conference room // ✅ Icon + color for errors Error message // ✅ Focus states