Mobile-first UX optimization for touch interfaces, responsive layouts, and performance. Use for viewport handling, touch targets, gestures, mobile navigation. Activate on mobile, touch, responsive, dvh, viewport, safe area, hamburger menu. NOT for native app development (use React Native skills), de

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 The 44px Rule Apple's Human Interface Guidelines specify 44×44 points as minimum touch target. Google Material suggests 48×48dp . Viewport Handling The dvh Solution Mobile browsers have dynamic toolbars. 100vh includes the URL bar, causing content to be cut off. Safe Area Insets (Notches & Home Indicators) Required meta tag: Tailwind Safe Area Classes Mobile Navigation Patterns Bottom Navigation (Recommended for Mobile) Slide Out Drawer (Side Menu) Touch Gestures Full implementations in references/gestures.md Hook Purpose useSwipe() Directional swipe detection with configurable threshold usePullToRefresh() Pull to refresh with visual feedback and resistance Quick usage: Mobile Performance Image Optimization Reduce Bundle Size Skeleton Screens (Not Spinners) Responsive Patterns Tailwind Breakpoint Strategy Container Queries (CSS only Responsive Components) Testing on Real Devices Chrome DevTools Mobile Emulation 1. Open DevTools (F12) 2. Toggle device toolbar (Ctrl+Shift+M) 3. Select device or set custom dimensions 4. Throttle network/CPU for realistic performance Must Test Scenarios [ ] Content doesn't get cut off by notch/home indicator [ ] Touch targets are at least 44×44px [ ] Scrolling is smooth (no jank) [ ] Bottom nav doesn't block content [ ] Forms work with virtual keyboard visible [ ] Landscape orientation works [ ] Pull to refresh doesn't fight with scroll BrowserStack/Real Device Testing Quick Reference Issue Solution Content cut off at bottom Use 100dvh instead of 100vh Notch overlaps content Add pt safe / pb safe Touch targets too small Min 44×44px Scroll locked Check overflow: hidden on body Keyboard covers input Use visualViewport API Janky scrolling Use will change: transform Double tap zoom Add touch action: manipulation References See /references/ for detailed guides: keyboard handling.md Virtual keyboard and form UX animations.md Touch friendly animations accessibility.md Mobile a11y requirements

mobile-ux-optimizer