mobile-ux-optimizerlisted

<!-- AUTO-GENERATED from .agents/skills/mobile-ux-optimizer. DO NOT EDIT. Run: node .toolkit/scripts/sync-mirror.mjs --> # Mobile-First UX Optimization Build touch-optimized, performant mobile experiences with proper viewport handling and responsive patterns. ## When to Use ✅ **USE this skill for:** - Viewport issues (`100vh` problems, safe areas, notches) - Touch target sizing and spacing - Mobile navigation patterns (bottom nav, drawers, hamburger menus) - Swipe gestures and pull-to-refresh - Responsive breakpoint strategies - Mobile performance optimization ❌ **DO NOT use for:** - Native app development → use `react-native` or `swift-executor` skills - Desktop-only features → no skill needed, standard patterns apply - General CSS/Tailwind questions → use Tailwind docs or `web-design-expert` - PWA installation/service workers → use `pwa-expert` skill ## Core Principles ### Mobile-First Means Build Up, Not Down ```css /* ❌ ANTI-PATTERN: Desktop-first (scale down) */ .card { width: 400px; } @media (max-width: 768px) { .card { width: 100%; } } /* ✅ CORRECT: Mobile-first (scale up) */ .card { width: 100%; } @media (min-width: 768px) { .card { width: 400px; } } ``` ### The 44px Rule Apple's Human Interface Guidelines specify **44×44 points** as minimum touch target. Google Material suggests **48×48dp**. ```tsx // Touch-friendly button <button className="min-h-[44px] min-w-[44px] px-4 py-3"> Tap me </button> // Touch-friendly link with adequate padding <a href="/pa