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) Finger ≠ cursor Accuracy is low Reach matters more than precision Rules: Primary CTAs live in thumb zone Destructive actions pushed away No hover assumptions 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' ) ; } } const everywhere possible Targeted rebuilds only 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 Touch targets ≥ 44–48px Offline handled Secure storage used Lists optimized Logs stripped Tested on low-end devices Accessibility labels present MFRI ≥ 3 11.