Mobile-First Design Skill

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

CRITICAL: Check Existing First

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

2. 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