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

• frontend-design – Visual systems & components

• frontend-dev-guidelines – RN/TS architecture

• backend-dev-guidelines – Mobile-safe APIs

• error-tracking – Crash & performance telemetry

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.