mobile-design

name	mobile-design
description	Apply mobile-first design patterns and touch interactions. Implements navigation, responsive layouts, touch targets, gestures, and platform-aware patterns for iOS and Android.
argument-hint	[patterns | touch] — Optional: run just navigation/layout patterns or touch interactions. Default: both.

Mobile Design

Apply mobile-first patterns and touch interactions. Run both areas or target one specifically.

Usage

/mobile-design           — apply both patterns and touch interactions
/mobile-design patterns  — navigation, layout, responsive strategies only
/mobile-design touch     — touch targets, gestures, haptics only

Instructions

Parse the argument and run the specified area(s). If no argument, run both in order.

---

Area: patterns

Apply mobile navigation, layout patterns, and responsive strategies.

Goals:

• Implement appropriate mobile navigation pattern for the app type
• Ensure content is reachable within thumb zones
• Apply responsive grid that works from 320px up

Navigation patterns (choose based on app type):

• Bottom nav bar — for apps with 3-5 top-level destinations (most apps)
• Hamburger/drawer — for content-heavy apps with many nav items
• Tab bar — iOS-native feel, persistent tabs
• Top nav with back — for linear flows (checkout, onboarding)

Layout rules:

• Single column on mobile — avoid multi-column below 640px