mobile-design

Mobile Design System

(Mobile-First · Touch-First · Platform-Respectful)

> Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable.

> Core Law: Mobile is NOT a small desktop.

> Operating Rule: Think constraints first, aesthetics second.

This skill exists to prevent desktop-thinking, AI-defaults, and unsafe assumptions when designing or building mobile applications.

---

1. Mobile Feasibility & Risk Index (MFRI)

Before designing or implementing any mobile feature or screen, assess feasibility.

MFRI Dimensions (1–5)

| Dimension | Question |

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

| Platform Clarity | Is the target platform (iOS / Android / both) explicitly defined? |

| Interaction Complexity | How complex are gestures, flows, or navigation? |

| Performance Risk | Does this involve lists, animations, heavy state, or media? |

| Offline Dependence | Does the feature break or degrade without network? |

| Accessibility Risk | Does this impact motor, visual, or cognitive accessibility? |

Score Formula

MFRI = (Platform Clarity + Accessibility Readiness)
       − (Interaction Complexity + Performance Risk + Offline Dependence)

Range: -10 → +10

Interpretation

| MFRI | Meaning | Required Action |

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

| 6–10 | Safe | Proceed normally |

| 3–5 | Moderate | Add performance + UX validation |

| 0–2 | Risky | Simplify interactions or architecture |

| < 0 | Dangerous | Redesign before implementation |

---

2. Mandatory Thinking Before Any Work

⛔ STOP: Ask Before Assuming (Required)

If any of the following are not explicitly stated, you MUST ask before proceeding:

| Aspect | Question | Why |

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

| Platform | iOS, Android, or both? | Affects navigation, gestures, typography |

| Framework | React Native, Flutter, or native? | Determines performance and patterns |

| Navigation | Tabs, stack, drawer? | Core UX architecture |

| Offline | Must it work offline? | Data & sync strategy |

| Devices | Phone only or tablet too? | Layout & density rules |

| Audience | Consumer, enterprise, accessibility needs? | Touch & readability |

🚫 Never default to your favorite stack or pattern.

---

3. Mandatory Reference Reading (Enforced)

Universal (Always Read First)

| File | Purpose | Status |

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

| mobile-design-thinking.md | Anti-memorization, context-forcing | 🔴 REQUIRED FIRST |

| touch-psychology.md | Fitts’ Law, thumb zones, gestures | 🔴 REQUIRED |

| mobile-performance.md | 60fps, memory, battery | 🔴 REQUIRED |

| mobile-backend.md | Offline sync, push, APIs | 🔴 REQUIRED |

| mobile-testing.md | Device & E2E testing | 🔴 REQUIRED |

| mobile-debugging.md | Native vs JS debugging | 🔴 REQUIRED |

Platform-Specific (Conditional)

| Platform | File |

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

| iOS | platform-ios.md |

| Android | platform-android.md |

| Cross-platform | BOTH above |

> ❌ If you haven’t read the platform file, you are not allowed to design UI.

---

4. AI Mobile Anti-Patterns (Hard Bans)

🚫 Performance Sins (Non-Negotiable)

| ❌ Never | Why | ✅ Always |

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

| ScrollView for long lists | Memory explosion | FlatList / FlashList / ListView.builder |

| Inline renderItem | Re-renders all rows | useCallback + memo |

| Index as key | Reorder bugs | Stable ID |

| JS-thread animations | Jank | Native driver / GPU |

| console.log in prod | JS thread block | Strip logs |

| No memoization | Battery + perf drain | React.memo / const widgets |

---

🚫 Touch & UX Sins

| ❌ Never | Why | ✅ Always |

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

| Touch <44–48px | Miss taps | Min touch target |

| Gesture-only action | Excludes users | Button fallback |

| No loading state | Feels broken | Explicit feedback |

| No error recovery | Dead end | Retry + message |

| Ignore platform norms | Muscle memory broken | iOS ≠ Android |

---

🚫 Security Sins

| ❌ Never | Why | ✅ Always |

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

| Tokens in AsyncStorage | Easily stolen | SecureStore / Keychain |

| Hardcoded secrets | Reverse engineered | Env + secure storage |

| No SSL pinning | MITM risk | Cert pinning |

| Log sensitive data | PII leakage | Never log secrets |

---

5. Platform Unification vs Divergence Matrix

UNIFY                          DIVERGE
──────────────────────────     ─────────────────────────
Business logic                Navigation behavior
Data models                    Gestures
API contracts                  Icons
Validation                     Typography
Error semantics                Pickers / dialogs

Platform Defaults

| Element | iOS | Android |

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

| Font | SF Pro | Roboto |

| Min touch | 44pt | 48dp |

| Back | Edge swipe | System back |

| Sheets | Bottom sheet | Dialog / sheet |

| Icons | SF Symbols | Material Icons |

---

6. Mobile UX Psychology (Non-Optional)

Fitts’ Law (Touch Reality)

Rules:

---

7. Performance Doctrine

React Native (Required Pattern)

const Row = React.memo(({ item }) => (
  <View><Text>{item.title}</Text></View>
));

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

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(i) => i.id}
  getItemLayout={(_, i) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * i,
    index: i,
  })}
/>

Flutter (Required Pattern)

class Item extends StatelessWidget {
  const Item({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Static');
  }
}

---

8. Mandatory Mobile Checkpoint

Before writing any code, you must complete this:

🧠 MOBILE CHECKPOINT

Platform:     ___________
Framework:    ___________
Files Read:   ___________

3 Principles I Will Apply:
1.
2.
3.

Anti-Patterns I Will Avoid:
1.
2.

❌ Cannot complete → go back and read.

---

9. Framework Decision Tree (Canonical)

Need OTA + web team → React Native + Expo
High-perf UI → Flutter
iOS only → SwiftUI
Android only → Compose

No debate without justification.

---

10. Release Readiness Checklist

Before Shipping

---

11. Related Skills

---

> Final Law:

> Mobile users are distracted, interrupted, and impatient—often using one hand on a bad network with low battery.

> Design for that reality, or your app will fail quietly.

---