Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.
Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable.
Core Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.
π§ Runtime Scripts
Execute these for validation (don't read, just run):
Script
Purpose
Usage
scripts/mobile_audit.py
Mobile UX & Touch Audit
python scripts/mobile_audit.py <project_path>
π΄ MANDATORY: Read Reference Files Before Working!
β DO NOT start development until you read the relevant files:
π΄ If building for iOS β Read platform-ios.md FIRST!
π΄ If building for Android β Read platform-android.md FIRST!
π΄ If cross-platform β Read BOTH and apply conditional platform logic!
β οΈ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)
STOP! If the user's request is open-ended, DO NOT default to your favorites.
You MUST Ask If Not Specified:
Aspect
Ask
Why
Platform
"iOS, Android, or both?"
Affects EVERY design decision
Framework
"React Native, Flutter, or native?"
Determines patterns and tools
Navigation
"Tab bar, drawer, or stack-based?"
Core UX decision
State
"What state management? (Zustand/Redux/Riverpod/BLoC?)"
Architecture foundation
Offline
"Does this need to work offline?"
Affects data strategy
Target devices
"Phone only, or tablet support?"
Layout complexity
β AI MOBILE ANTI-PATTERNS (YASAK LΔ°STESΔ°)
π« These are AI default tendencies that MUST be avoided!
UNIFY (same on both) DIVERGE (platform-specific)
βββββββββββββββββββ ββββββββββββββββββββββββββ
Business Logic β Always -
Data Layer β Always -
Core Features β Always -
Navigation - β iOS: edge swipe, Android: back button
Gestures - β Platform-native feel
Icons - β SF Symbols vs Material Icons
Date Pickers - β Native pickers feel right
Modals/Sheets - β iOS: bottom sheet vs Android: dialog
Typography - β SF Pro vs Roboto (or custom)
Error Dialogs - β Platform conventions for alerts
Quick Reference: Platform Defaults
Element
iOS
Android
Primary Font
SF Pro / SF Compact
Roboto
Min Touch Target
44pt Γ 44pt
48dp Γ 48dp
Back Navigation
Edge swipe left
System back button/gesture
Bottom Tab Icons
SF Symbols
Material Symbols
Action Sheet
UIActionSheet from bottom
Bottom Sheet / Dialog
Progress
Spinner
Linear progress (Material)
Pull to Refresh
Native UIRefreshControl
SwipeRefreshLayout
π§ Mobile UX Psychology (Quick Reference)
Fitts' Law for Touch
Desktop: Cursor is precise (1px)
Mobile: Finger is imprecise (~7mm contact area)
β Touch targets MUST be 44-48px minimum
β Important actions in THUMB ZONE (bottom of screen)
β Destructive actions AWAY from easy reach
Thumb Zone (One-Handed Usage)
βββββββββββββββββββββββββββββββ
β HARD TO REACH β β Navigation, menu, back
β (stretch) β
βββββββββββββββββββββββββββββββ€
β OK TO REACH β β Secondary actions
β (natural) β
βββββββββββββββββββββββββββββββ€
β EASY TO REACH β β PRIMARY CTAs, tab bar
β (thumb's natural arc) β β Main content interaction
βββββββββββββββββββββββββββββββ
[ HOME ]
Remember: Mobile users are impatient, interrupted, and using imprecise fingers on small screens. Design for the WORST conditions: bad network, one hand, bright sun, low battery. If it works there, it works everywhere.