mobile-design

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 |

---

⛔ DO NOT start development until you read the relevant files:

Universal (Always Read)

| File | Content | Status |

|------|---------|--------|

| [mobile-design-thinking.md](mobile-design-thinking.md) | ⚠️ ANTI-MEMORIZATION: Forces thinking, prevents AI defaults | ⬜ CRITICAL FIRST |

| [touch-psychology.md](touch-psychology.md) | Fitts' Law, gestures, haptics, thumb zone | ⬜ CRITICAL |

| [mobile-performance.md](mobile-performance.md) | RN/Flutter performance, 60fps, memory | ⬜ CRITICAL |

| [mobile-backend.md](mobile-backend.md) | Push notifications, offline sync, mobile API | ⬜ CRITICAL |

| [mobile-testing.md](mobile-testing.md) | Testing pyramid, E2E, platform-specific | ⬜ CRITICAL |

| [mobile-debugging.md](mobile-debugging.md) | Native vs JS debugging, Flipper, Logcat | ⬜ CRITICAL |

| [mobile-navigation.md](mobile-navigation.md) | Tab/Stack/Drawer, deep linking | ⬜ Read |

| [mobile-typography.md](mobile-typography.md) | System fonts, Dynamic Type, a11y | ⬜ Read |

| [mobile-color-system.md](mobile-color-system.md) | OLED, dark mode, battery-aware | ⬜ Read |

| [decision-trees.md](decision-trees.md) | Framework/state/storage selection | ⬜ Read |

> 🧠 mobile-design-thinking.md is PRIORITY! This file ensures AI thinks instead of using memorized patterns.

Platform-Specific (Read Based on Target)

| Platform | File | Content | When to Read |

|----------|------|---------|--------------|

| iOS | [platform-ios.md](platform-ios.md) | Human Interface Guidelines, SF Pro, SwiftUI patterns | Building for iPhone/iPad |

| Android | [platform-android.md](platform-android.md) | Material Design 3, Roboto, Compose patterns | Building for Android |

| Cross-Platform | Both above | Platform divergence points | React Native / Flutter |

> 🔴 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!

---

> 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!

#### Performance Sins

| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |

|-------------|----------------|--------------|

| ScrollView for long lists | Renders ALL items, memory explodes | Use FlatList / FlashList / ListView.builder |

| Inline renderItem function | New function every render, all items re-render | useCallback + React.memo |

| Missing keyExtractor | Index-based keys cause bugs on reorder | Unique, stable ID from data |

| Skip getItemLayout | Async layout = janky scroll | Provide when items have fixed height |

| setState() everywhere | Unnecessary widget rebuilds | Targeted state, const constructors |

| Native driver: false | Animations blocked by JS thread | useNativeDriver: true always |

| console.log in production | Blocks JS thread severely | Remove before release build |

| Skip React.memo/const | Every item re-renders on any change | Memoize list items ALWAYS |

#### Touch/UX Sins

| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |

|-------------|----------------|--------------|

| Touch target < 44px | Impossible to tap accurately, frustrating | Minimum 44pt (iOS) / 48dp (Android) |

| Spacing < 8px between targets | Accidental taps on neighbors | Minimum 8-12px gap |

| Gesture-only interactions | Motor impaired users excluded | Always provide button alternative |

| No loading state | User thinks app crashed | ALWAYS show loading feedback |

| No error state | User stuck, no recovery path | Show error with retry option |

| No offline handling | Crash/block when network lost | Graceful degradation, cached data |

| Ignore platform conventions | Users confused, muscle memory broken | iOS feels iOS, Android feels Android |

#### Security Sins

| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |

|-------------|----------------|--------------|

| Token in AsyncStorage | Easily accessible, stolen on rooted device | SecureStore / Keychain / EncryptedSharedPreferences |

| Hardcode API keys | Reverse engineered from APK/IPA | Environment variables, secure storage |

| Skip SSL pinning | MITM attacks possible | Pin certificates in production |

| Log sensitive data | Logs can be extracted | Never log tokens, passwords, PII |

#### Architecture Sins

| ❌ NEVER DO | Why It's Wrong | ✅ ALWAYS DO |

|-------------|----------------|--------------|

| Business logic in UI | Untestable, unmaintainable | Service layer separation |

| Global state for everything | Unnecessary re-renders, complexity | Local state default, lift when needed |

| Deep linking as afterthought | Notifications, shares broken | Plan deep links from day one |

| Skip dispose/cleanup | Memory leaks, zombie listeners | Clean up subscriptions, timers |

---

When to Unify vs Diverge

```

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 |

---

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 ]

```

Mobile-Specific Cognitive Load

| Desktop | Mobile Difference |

|---------|-------------------|

| Multiple windows | ONE task at a time |

| Keyboard shortcuts | Touch gestures |

| Hover states | NO hover (tap or nothing) |

| Large viewport | Limited space, scroll vertical |

| Stable attention | Interrupted constantly |

For deep dive: [touch-psychology.md](touch-psychology.md)

---

React Native Critical Rules

```typescript

// ✅ CORRECT: Memoized renderItem + React.memo wrapper

const ListItem = React.memo(({ item }: { item: Item }) => (

{item.title}

));

const renderItem = useCallback(

({ item }: { item: Item }) => ,

[]

);

// ✅ CORRECT: FlatList with all optimizations

data={items}

renderItem={renderItem}

keyExtractor={(item) => item.id} // Stable ID, NOT index

getItemLayout={(data, index) => ({

length: ITEM_HEIGHT,

offset: ITEM_HEIGHT * index,

index,

})}

removeClippedSubviews={true}

maxToRenderPerBatch={10}

windowSize={5}

/>

```

Flutter Critical Rules

```dart

// ✅ CORRECT: const constructors prevent rebuilds

class MyWidget extends StatelessWidget {

const MyWidget({super.key}); // CONST!

@override

Widget build(BuildContext context) {

return const Column( // CONST!

children: [

Text('Static content'),

MyConstantWidget(),

],

);

}

}

// ✅ CORRECT: Targeted state with ValueListenableBuilder

ValueListenableBuilder(

valueListenable: counter,

builder: (context, value, child) => Text('$value'),

child: const ExpensiveWidget(), // Won't rebuild!

)

```

Animation Performance

```

GPU-accelerated (FAST): CPU-bound (SLOW):

├── transform ├── width, height

├── opacity ├── top, left, right, bottom

└── (use these ONLY) ├── margin, padding

└── (AVOID animating these)

```

For complete guide: [mobile-performance.md](mobile-performance.md)

---

> Before writing ANY mobile code, you MUST complete this checkpoint:

```

🧠 CHECKPOINT:

Platform: [ iOS / Android / Both ]

Framework: [ React Native / Flutter / SwiftUI / Kotlin ]

Files Read: [ List the skill files you've read ]

3 Principles I Will Apply:

1. _______________
2. _______________
3. _______________

Anti-Patterns I Will Avoid:

1. _______________
2. _______________

```

Example:

```

🧠 CHECKPOINT:

Platform: iOS + Android (Cross-platform)

Framework: React Native + Expo

Files Read: touch-psychology.md, mobile-performance.md, platform-ios.md, platform-android.md

3 Principles I Will Apply:

1. FlatList with React.memo + useCallback for all lists
2. 48px touch targets, thumb zone for primary CTAs
3. Platform-specific navigation (edge swipe iOS, back button Android)

Anti-Patterns I Will Avoid:

1. ScrollView for lists → FlatList
2. Inline renderItem → Memoized
3. AsyncStorage for tokens → SecureStore

```

> 🔴 Can't fill the checkpoint? → GO BACK AND READ THE SKILL FILES.

---

```

WHAT ARE YOU BUILDING?

│

├── Need OTA updates + rapid iteration + web team

│ └── ✅ React Native + Expo

│

├── Need pixel-perfect custom UI + performance critical

│ └── ✅ Flutter

│

├── Deep native features + single platform focus

│ ├── iOS only → SwiftUI

│ └── Android only → Kotlin + Jetpack Compose

│

├── Existing RN codebase + new features

│ └── ✅ React Native (bare workflow)

│

└── Enterprise + existing Flutter codebase

└── ✅ Flutter

```

For complete decision trees: [decision-trees.md](decision-trees.md)

---

Before Starting ANY Mobile Project

• [ ] Platform confirmed? (iOS / Android / Both)
• [ ] Framework chosen? (RN / Flutter / Native)
• [ ] Navigation pattern decided? (Tabs / Stack / Drawer)
• [ ] State management selected? (Zustand / Redux / Riverpod / BLoC)
• [ ] Offline requirements known?
• [ ] Deep linking planned from day one?
• [ ] Target devices defined? (Phone / Tablet / Both)

Before Every Screen

• [ ] Touch targets ≥ 44-48px?
• [ ] Primary CTA in thumb zone?
• [ ] Loading state exists?
• [ ] Error state with retry exists?
• [ ] Offline handling considered?
• [ ] Platform conventions followed?

Before Release

• [ ] console.log removed?
• [ ] SecureStore for sensitive data?
• [ ] SSL pinning enabled?
• [ ] Lists optimized (memo, keyExtractor)?
• [ ] Memory cleanup on unmount?
• [ ] Tested on low-end devices?
• [ ] Accessibility labels on all interactive elements?

---

For deeper guidance on specific areas:

| File | When to Use |

|------|-------------|

| [mobile-design-thinking.md](mobile-design-thinking.md) | FIRST! Anti-memorization, forces context-based thinking |

| [touch-psychology.md](touch-psychology.md) | Understanding touch interaction, Fitts' Law, gesture design |

| [mobile-performance.md](mobile-performance.md) | Optimizing RN/Flutter, 60fps, memory/battery |

| [platform-ios.md](platform-ios.md) | iOS-specific design, HIG compliance |

| [platform-android.md](platform-android.md) | Android-specific design, Material Design 3 |

| [mobile-navigation.md](mobile-navigation.md) | Navigation patterns, deep linking |

| [mobile-typography.md](mobile-typography.md) | Type scale, system fonts, accessibility |

| [mobile-color-system.md](mobile-color-system.md) | OLED optimization, dark mode, battery |

| [decision-trees.md](decision-trees.md) | Framework, state, storage decisions |

---

> 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.