design-mobile-first

Mobile-First Design Skill

Degree of freedom: MIXED. Pattern choice [HIGH freedom]; breakpoint, viewport, and existing-hook inventory [LOW freedom — run exactly].

Build interfaces that work on mobile first, then enhance for larger screens.

Not this skill: a desktop that is a linearized phone (no max-width, stacked at 1440, stretched buttons). That is audit-responsive.

How to reason

1. Survey — breakpoints, viewport, existing mobile hooks
2. Base — mobile styles first (44px, safe-area)
3. Enhance — sm:/md:/lg: add up; they do not replace the base
4. Device-check — real phone, not only a resized desktop window

Worked example

Survey: Tailwind sm/md/lg exist; checkout CTA is h-8; no safe-area-inset-bottom. Base: min-h-[44px], pb-[env(safe-area-inset-bottom)], stacked fields, 16px inputs. Enhance: two-column names at sm:; table replaces cards at md:. Device-check: thumb reaches the CTA; iOS does not zoom on focus.

Self-critique before reporting

• Base is mobile — primary layout is not lg:-only
• 44px + safe-area — tap targets and notches were measured
• Real device — not emulator-or-resize only
• Right owner — linearized 1440 desktop → audit-responsive; hybrid native chrome → enhance-capacitor-ui

CRITICAL: Check Existing First [LOW freedom — run exactly]

Before ANY mobile optimization, verify:

1. Check existing breakpoints:

cat tailwind.config.* | grep -A10 "screens\|breakpoints"
rg "sm:|md:|lg:|xl:" --type tsx | head -20

1. Check for existing mobile patterns:

rg "useMediaQuery|useBreakpoint|isMobile" --type ts --type tsx
ls -la src/hooks/use*Mobile* src/hooks/use*Responsive* 2>/dev/null

1. Check viewport meta:

rg "viewport" src/app/layout.tsx index.html

Why: Maintain consistent responsive patterns across the app.

Mobile-First Principles [HIGH freedom]

1. Design for Mobile First

/* Base styles = mobile */
.card {
 padding: 1rem;
 font-size: 0.875rem;
}

/* Then enhance for larger screens */
@media (min-width: 640px) {
 .card {
 padding: 1.5rem;
 font-size: 1rem;
 }
}

/* Tailwind design-mobile-first */
<div className="p-4 sm:p-6 md:p-8">
<div className="text-sm sm:text-base lg:text-lg">
<div className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">