design-mobile-firstlisted

# 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:** ```bash cat tailwind.config.* | grep -A10 "screens\|breakpoints" rg "sm:|md:|lg:|xl:" --type tsx | head -20 ``` 2. **Check for existing mobile patterns:** ```bash rg "useMediaQuery|useBreakpoint|isMobile" --type ts --type tsx ls -la src/hooks/use*Mobile* src/hooks/use*Responsive* 2>/dev/null ``` 3. **Check viewport meta:** ```bash rg "viewport" src/app/layout.tsx index.html ``` **Why:** Maintain consistent responsive patterns across the app. ## Mobile-First Principles ### 1. Design for Mobile First ```css /* 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"> ``` ### 2. Touch Targets (44px minimum) ```tsx // Touch-friendly button <button className="min-h-[44px] min-w-[44px] px-4 py-3"> Tap me </button> // Touch-friendly list items <li className="py-3 px-4 min-h-[44px] active:bg-muted"> List item </li> // Icon buttons with proper touch area <button className="p-3 -m-3" // Negative margin extends touch area aria-lab