Mobile Design Advisor

/mobile-design

Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values.

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.

ASK BEFORE ASSUMING (Mandatory)

If the user's request is open-ended, DO NOT default to your favorites. Ask if not specified:

AI Mobile Anti-Patterns (Forbidden List)

These are default tendencies that MUST be avoided.

Performance Sins

Touch/UX Sins

Security Sins

Architecture Sins

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

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

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)

Checkpoint (Mandatory Before Any Mobile Work)

Before proposing ANY mobile design or code, complete this checkpoint in your answer:

CHECKPOINT:

Platform:   [ iOS / Android / Both ]
Framework:  [ React Native / Flutter / SwiftUI / Kotlin ]

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

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

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

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?

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.

Usage

/mobile-design $ARGUMENTS