Agent skill · design visual · erichowens
mobile-ux-optimizer
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,
Why this skill is useful
Provides specific mobile UX optimization patterns and techniques that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/mobile-ux-optimizer