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 | ✅ Alway
1---2name: mobile-design3description: (Mobile-First · Touch-First · Platform-Respectful)4---56# Mobile Design System78**(Mobile-First · Touch-First · Platform-Respectful)**910> **Philosophy:** Touch-first. Battery-conscious. Platform-respectful. Offline-capable.11> **Core Law:** Mobile is NOT a small desktop.12> **Operating Rule:** Think constraints first, aesthetics second.1314This skill exists to **prevent desktop-thinking, AI-defaults, and unsafe assumptions** when designing or building mobile applications.1516---1718## 1. Mobile Feasibility & Risk Index (MFRI)1920Before designing or implementing **any mobile feature or screen**, assess feasibility.2122### MFRI Dimensions (1–5)2324| Dimension | Question |25| -------------------------- | ----------------------------------------------------------------- |26| **Platform Clarity** | Is the target platform (iOS / Android / both) explicitly defined? |27| **Interaction Complexity** | How complex are gestures, flows, or navigation? |28| **Performance Risk** | Does this involve lists, animations, heavy state, or media? |29| **Offline Dependence** | Does the feature break or degrade without network? |30| **Accessibility Risk** | Does this impact motor, visual, or cognitive accessibility? |3132### Score Formula3334```35MFRI = (Platform Clarity + Accessibility Readiness)36 − (Interaction Complexity + Performance Risk + Offline Dependence)37```3839**Range:** `-10 → +10`4041### Interpretation4243| MFRI | Meaning | Required Action |44| -------- | --------- | ------------------------------------- |45| **6–10** | Safe | Proceed normally |46| **3–5** | Moderate | Add performance + UX validation |47| **0–2** | Risky | Simplify interactions or architecture |48| **< 0** | Dangerous | Redesign before implementation |4950---5152## 2. Mandatory Thinking Before Any Work5354### ⛔ STOP: Ask Before Assuming (Required)5556If **any of the following are not explicitly stated**, you MUST ask before proceeding:5758| Aspect | Question | Why |59| ---------- | ------------------------------------------ | ---------------------------------------- |60| Platform | iOS, Android, or both? | Affects navigation, gestures, typography |61| Framework | React Native, Flutter, or native? | Determines performance and patterns |62| Navigation | Tabs, stack, drawer? | Core UX architecture |63| Offline | Must it work offline? | Data & sync strategy |64| Devices | Phone only or tablet too? | Layout & density rules |65| Audience | Consumer, enterprise, accessibility needs? | Touch & readability |6667🚫 **Never default to your favorite stack or pattern.**6869---7071## 3. Mandatory Reference Reading (Enforced)7273### Universal (Always Read First)7475| File | Purpose | Status |76| ----------------------------- | ---------------------------------- | ----------------- |77| **mobile-design-thinking.md** | Anti-memorization, context-forcing | 🔴 REQUIRED FIRST |78| **touch-psychology.md** | Fitts’ Law, thumb zones, gestures | 🔴 REQUIRED |79| **mobile-performance.md** | 60fps, memory, battery | 🔴 REQUIRED |80| **mobile-backend.md** | Offline sync, push, APIs | 🔴 REQUIRED |81| **mobile-testing.md** | Device & E2E testing | 🔴 REQUIRED |82| **mobile-debugging.md** | Native vs JS debugging | 🔴 REQUIRED |8384### Platform-Specific (Conditional)8586| Platform | File |87| -------------- | ------------------- |88| iOS | platform-ios.md |89| Android | platform-android.md |90| Cross-platform | BOTH above |9192> ❌ If you haven’t read the platform file, you are not allowed to design UI.9394---9596## 4. AI Mobile Anti-Patterns (Hard Bans)9798### 🚫 Performance Sins (Non-Negotiable)99100| ❌ Never | Why | ✅ Always |101| ------------------------- | -------------------- | --------------------------------------- |102| ScrollView for long lists | Memory explosion | FlatList / FlashList / ListView.builder |103| Inline renderItem | Re-renders all rows | useCallback + memo |104| Index as key | Reorder bugs | Stable ID |105| JS-thread animations | Jank | Native driver / GPU |106| console.log in prod | JS thread block | Strip logs |107| No memoization | Battery + perf drain | React.memo / const widgets |108109---110111### 🚫 Touch & UX Sins112113| ❌ Never | Why | ✅ Alway
ranbot-ai