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