Agent Skills: Mobile Design System

Mobile Design System

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:

Universal (Always Read)

| File | Content | Status | |------|---------|--------| | mobile-design-thinking.md | ⚠️ ANTI-MEMORIZATION: Forces thinking, prevents AI defaults | ⬜ CRITICAL FIRST | | touch-psychology.md | Fitts' Law, gestures, haptics, thumb zone | ⬜ CRITICAL | | mobile-performance.md | RN/Flutter performance, 60fps, memory | ⬜ CRITICAL | | mobile-backend.md | Push notifications, offline sync, mobile API | ⬜ CRITICAL | | mobile-testing.md | Testing pyramid, E2E, platform-specific | ⬜ CRITICAL | | mobile-debugging.md | Native vs JS debugging, Flipper, Logcat | ⬜ CRITICAL | | mobile-navigation.md | Tab/Stack/Drawer, deep linking | ⬜ Read | | mobile-typography.md | System fonts, Dynamic Type, a11y | ⬜ Read | | mobile-color-system.md | OLED, dark mode, battery-aware | ⬜ Read | | 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 | Human Interface Guidelines, SF Pro, SwiftUI patterns | Building for iPhone/iPad | | Android | 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!

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

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 |

📱 Platform Decision Matrix

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 |

🧠 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  ]

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

⚡ Performance Principles (Quick Reference)

React Native Critical Rules

// ✅ CORRECT: Memoized renderItem + React.memo wrapper
const ListItem = React.memo(({ item }: { item: Item }) => (
  <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
));

const renderItem = useCallback(
  ({ item }: { item: Item }) => <ListItem item={item} />,
  []
);

// ✅ CORRECT: FlatList with all optimizations
<FlatList
  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

// ✅ 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<int>(
  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

📝 CHECKPOINT (MANDATORY Before Any Mobile Work)

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.

🔧 Framework Decision Tree

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

📋 Pre-Development Checklist

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?

📚 Reference Files

For deeper guidance on specific areas:

| File | When to Use | |------|-------------| | mobile-design-thinking.md | FIRST! Anti-memorization, forces context-based thinking | | touch-psychology.md | Understanding touch interaction, Fitts' Law, gesture design | | mobile-performance.md | Optimizing RN/Flutter, 60fps, memory/battery | | platform-ios.md | iOS-specific design, HIG compliance | | platform-android.md | Android-specific design, Material Design 3 | | mobile-navigation.md | Navigation patterns, deep linking | | mobile-typography.md | Type scale, system fonts, accessibility | | mobile-color-system.md | OLED optimization, dark mode, battery | | 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.