Responsive Layout System

Context

Responsive design fails when treated as an afterthought — "just make it stack on mobile." This skill defines the layout system upfront so every component has explicit behavior at every breakpoint, preventing the ad-hoc CSS that creates inconsistent mobile experiences.

Procedure

1. Define breakpoints based on content, not devices. Standard set: 375px (mobile), 640px (large mobile), 768px (tablet), 1024px (small desktop), 1280px (desktop), 1536px (large desktop). Use min-width (mobile-first) media queries.
2. Set the container system: max-width per breakpoint, horizontal padding, and centering. Example: 1280px max, 16px padding mobile, 24px tablet, 32px desktop.
3. Define the grid: 12-column grid with configurable gap. Column spans per breakpoint for common layouts (full, half, third, quarter, two-thirds).
4. Create component scaling rules: which properties change at which breakpoint. Font sizes, padding, gaps, image dimensions, visibility toggles (show/hide elements).
5. Define stacking rules: the order in which elements stack when columns collapse. Hero: image drops below text. Cards: stack vertically, maintain order.
6. Set overflow rules: horizontal scroll prevention, text truncation, image containment. No element should exceed its container width.

Output Format

# Responsive Layout System

## Breakpoints
| Name | Min Width | Tailwind Prefix | Usage |
|------|-----------|-----------------|-------|
| base | 0px | (none) | Mobile-first default |
| sm | 640px | sm: | Large phones |
| md | 768px | md: | Tablets |
| lg | 1024px | lg: | Small desktops |
| xl | 1280px | xl: | Desktops |
| 2xl | 1536px | 2xl: | Large screens |

## Container
- Max width: 1280px (xl breakpoint)
- Padding: 16px (base), 24px (md), 32px (lg)
- Centering: mx-auto

## Grid System
- Columns: 12
- Gap: var(--space-4) base, var(--space-6) md, var(--space-8) lg
- Common spans:
  - Full: col-span-12
  - Half: col-span-12 md:col-span-6
  - Third: col-span-12 md:col-span-6 lg:col-span-4
  - Quarter: col-span-12 sm:col-span-6 lg:col-span-3
  - Two-thirds: col-span-12 lg:col-span-8

## Component Scaling
| Component | Base | md | lg |
|-----------|------|-----|-----|
| Hero headline | text-3xl | text-5xl | text-6xl |
| Section padding | py-12 | py-16 | py-20 |
| Card grid | 1 col | 2 col | 3 col |
| Nav | hamburger | hamburger | inline |
| Feature icons | 24px | 28px | 32px |

## Stacking Rules
| Layout | Desktop | Tablet | Mobile |
|--------|---------|--------|--------|
| Hero split | side-by-side | side-by-side | text-above-image |
| Feature grid | 3 columns | 2 columns | 1 column |
| Pricing | 3 columns | 2 columns | 1 column (stacked) |
| Footer | 4 columns | 2×2 grid | 1 column |

## Overflow Prevention
- All images: max-w-full, h-auto, object-cover where needed
- All text containers: overflow-wrap: break-word
- Horizontal scroll: overflow-x-hidden on body
- Tables: horizontal scroll wrapper on mobile

QA Rubric (scored)

• Mobile completeness (0-5): every section has explicit mobile behavior defined.
• Breakpoint logic (0-5): breakpoints are content-driven, not arbitrary device widths.
• Touch accessibility (0-5): all interactive elements are 44px+ on mobile.
• Readability (0-5): body text never drops below 16px, line lengths stay under 75ch.

Examples (good/bad)

• Good: "Hero section — desktop: 60/40 split grid. Tablet (768px): same split but headline drops to text-4xl. Mobile (375px): single column, text stacks above image, CTA becomes full-width button. Headline: text-3xl, 24px horizontal padding."
• Bad: "Make it responsive" with no specifics, leading to developers guessing at every breakpoint.

Variants

• Mobile-only mode: single breakpoint (768px) for simple sites — everything is either mobile or desktop.
• Fluid mode: no breakpoints — use clamp() for all sizing (font-size, padding, gaps) for smooth scaling across all viewports.