Mobile-First Responsive Patterns

Purpose

All generated code must follow mobile-first methodology. Base styles target mobile (375px). Scale UP with min-width. INPUT: Any component or page request. OUTPUT: Code that works on all screen sizes, mobile-first.

When to Use This Skill

• •Every component build (always active)
• •Every page build
• •Any layout or CSS work

Rules (Non-Negotiable)

1. •Base styles = mobile (375px viewport)
2. •Scale UP with min-width breakpoints ONLY
3. •NEVER use max-width media queries
4. •Touch targets: minimum 44x44px on all interactive elements
5. •No horizontal scroll at any breakpoint
6. •Images: 100% width on mobile, constrained on desktop
7. •Font sizes: reduce 15-20% on mobile vs desktop specs

Breakpoints

sm:  640px    (large phones / small tablets)
md:  768px    (tablets)
lg:  1024px   (small laptops)
xl:  1280px   (desktops)
2xl: 1536px   (large screens)

Tailwind Pattern (Preferred)

Base classes = mobile. Then layer responsive prefixes:

<!-- Padding: 16px mobile → 24px tablet → 32px desktop -->
<div class="px-4 sm:px-6 lg:px-8">

<!-- Grid: 1 col mobile → 2 col tablet → 3 col desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

<!-- Typography: scales up -->
<h1 class="text-2xl sm:text-3xl lg:text-5xl">

<!-- Visibility: hide on mobile, show on desktop -->
<nav class="hidden lg:flex">

<!-- Full-width on mobile, constrained on desktop -->
<div class="w-full max-w-none lg:max-w-6xl lg:mx-auto">

Layout Rules

Navigation

• •Mobile: Hamburger menu (hidden, toggle on tap)
• •lg+: Full horizontal nav bar

Content Grids

• •Mobile: Single column, stacked vertically
• •md+: 2-column grid
• •lg+: 3 or 4-column grid

Cards

• •Mobile: Full-width, stacked
• •md+: Side-by-side in grid
• •Images inside cards: 100% width, aspect-ratio locked

Modals / Drawers

• •Mobile: Full-screen overlay (bottom sheet pattern preferred)
• •lg+: Centered modal with backdrop

Tables

• •Mobile: Stack rows vertically OR horizontal scroll container
• •lg+: Standard table layout

Hero Sections

• •Mobile: Text stacked above image, centered
• •lg+: Text left, image right (or vice versa)

Forms

• •Mobile: Full-width inputs, stacked labels
• •lg+: Inline labels permitted, max-width on form container

CSS Pattern (if not using Tailwind)

/* BASE = MOBILE (no media query needed) */
.container {
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* TABLET AND UP */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    flex-direction: row;
  }
}

/* DESKTOP AND UP */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1280px;
    margin: 0 auto;
  }
}

Anti-Patterns (Never Do This)

/* BAD: Desktop-first (max-width) */
@media (max-width: 768px) {
  .container { padding: 16px; }
}

/* BAD: Fixed widths */
.card { width: 350px; }

/* BAD: Pixel-based font sizes without responsive scaling */
h1 { font-size: 48px; } /* no responsive variant */

Checklist (AI Self-Verification)

• • No max-width media queries used
• • Tested at 375px (iPhone SE)
• • Tested at 768px (iPad)
• • Tested at 1280px (Desktop)
• • No horizontal scroll at any size
• • All touch targets 44x44px minimum
• • Images have width: 100% on mobile
• • Navigation collapses on mobile
• • Font sizes scale across breakpoints