mobile-ux-optimizer

What problem does it solve?

This Skill addresses the unique challenges of designing for mobile devices, ensuring optimal user experience on touchscreens, with responsive layouts, and peak performance.

Core Features & Use Cases

• Viewport Handling: Solves issues with dynamic browser toolbars and safe area insets (notches, home indicators) using dvh and env(safe-area-inset-*).
• Touch Targets: Enforces minimum touch target sizes (44px/48dp) for better usability.
• Navigation Patterns: Provides examples for common mobile navigation like bottom nav bars and slide-out drawers.
• Gestures & Performance: Includes guidance on swipe gestures, pull-to-refresh, image optimization, and reducing bundle size.
• Use Case: Ensure your e-commerce app's product pages are easily navigable on a smartphone, with large, tappable buttons and content that doesn't get hidden by the browser's address bar.

Quick Start

Use the mobile-ux-optimizer skill to ensure the bottom navigation bar on the website is correctly padded for safe areas.