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)

Score Formula

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

Range: -10 → +10

Interpretation

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:

🚫 Never default to your favorite stack or pattern.

3. Mandatory Reference Reading (Enforced)

Universal (Always Read First)

Platform-Specific (Conditional)

> ❌ 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)

🚫 Touch & UX Sins

🚫 Security Sins

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

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

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