{"slug":"mobile-design-2","title":"mobile-design","summary":"Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-10-05T21:53:02.53843Z","repo":{"url":"https://github.com/VoDaiLocz/kilo-kit-mcp","stars":27,"forks":3,"license":"Apache-2.0","updatedAt":"2026-09-13T09:11:19Z"},"bodyHtml":"
\n

name: mobile-design\ndescription: Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.\nallowed-tools: Read, Glob, Grep, Bash

\n

Mobile Design System

\n
\n

Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable.\nCore Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.

\n
\n
\n

\uD83D\uDD27 Runtime Scripts

\n

Execute these for validation (don't read, just run):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ScriptPurposeUsage
scripts/mobile_audit.pyMobile UX & Touch Auditpython scripts/mobile_audit.py <project_path>
\n
\n

\uD83D\uDD34 MANDATORY: Read Reference Files Before Working!

\n

⛔ DO NOT start development until you read the relevant files:

\n

Universal (Always Read)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FileContentStatus
mobile-design-thinking.md⚠️ ANTI-MEMORIZATION: Forces thinking, prevents AI defaults⬜ CRITICAL FIRST
touch-psychology.mdFitts' Law, gestures, haptics, thumb zone⬜ CRITICAL
mobile-performance.mdRN/Flutter performance, 60fps, memory⬜ CRITICAL
mobile-backend.mdPush notifications, offline sync, mobile API⬜ CRITICAL
mobile-testing.mdTesting pyramid, E2E, platform-specific⬜ CRITICAL
mobile-debugging.mdNative vs JS debugging, Flipper, Logcat⬜ CRITICAL
mobile-navigation.mdTab/Stack/Drawer, deep linking⬜ Read
mobile-typography.mdSystem fonts, Dynamic Type, a11y⬜ Read
mobile-color-system.mdOLED, dark mode, battery-aware⬜ Read
decision-trees.mdFramework/state/storage selection⬜ Read
\n
\n

\uD83E\uDDE0 mobile-design-thinking.md is PRIORITY! This file ensures AI thinks instead of using memorized patterns.

\n
\n

Platform-Specific (Read Based on Target)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PlatformFileContentWhen to Read
iOSplatform-ios.mdHuman Interface Guidelines, SF Pro, SwiftUI patternsBuilding for iPhone/iPad
Androidplatform-android.mdMaterial Design 3, Roboto, Compose patternsBuilding for Android
Cross-PlatformBoth abovePlatform divergence pointsReact Native / Flutter
\n
\n

\uD83D\uDD34 If building for iOS → Read platform-ios.md FIRST!\n\uD83D\uDD34 If building for Android → Read platform-android.md FIRST!\n\uD83D\uDD34 If cross-platform → Read BOTH and apply conditional platform logic!

\n
\n
\n

⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)

\n
\n

STOP! If the user's request is open-ended, DO NOT default to your favorites.

\n
\n

You MUST Ask If Not Specified:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AspectAskWhy
Platform\"iOS, Android, or both?\"Affects EVERY design decision
Framework\"React Native, Flutter, or native?\"Determines patterns and tools
Navigation\"Tab bar, drawer, or stack-based?\"Core UX decision
State\"What state management? (Zustand/Redux/Riverpod/BLoC?)\"Architecture foundation
Offline\"Does this need to work offline?\"Affects data strategy
Target devices\"Phone only, or tablet support?\"Layout complexity
\n

⛔ AI MOBILE ANTI-PATTERNS (YASAK LİSTESİ)

\n
\n

\uD83D\uDEAB These are AI default tendencies that MUST be avoided!

\n
\n

Performance Sins

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
❌ NEVER DOWhy It's Wrong✅ ALWAYS DO
ScrollView for long listsRenders ALL items, memory explodesUse FlatList / FlashList / ListView.builder
Inline renderItem functionNew function every render, all items re-renderuseCallback + React.memo
Missing keyExtractorIndex-based keys cause bugs on reorderUnique, stable ID from data
Skip getItemLayoutAsync layout = janky scrollProvide when items have fixed height
setState() everywhereUnnecessary widget rebuildsTargeted state, const constructors
Native driver: falseAnimations blocked by JS threaduseNativeDriver: true always
console.log in productionBlocks JS thread severelyRemove before release build
Skip React.memo/constEvery item re-renders on any changeMemoize list items ALWAYS
\n

Touch/UX Sins

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
❌ NEVER DOWhy It's Wrong✅ ALWAYS DO
Touch target < 44pxImpossible to tap accurately, frustratingMinimum 44pt (iOS) / 48dp (Android)
Spacing < 8px between targetsAccidental taps on neighborsMinimum 8-12px gap
Gesture-only interactionsMotor impaired users excludedAlways provide button alternative
No loading stateUser thinks app crashedALWAYS show loading feedback
No error stateUser stuck, no recovery pathShow error with retry option
No offline handlingCrash/block when network lostGraceful degradation, cached data
Ignore platform conventionsUsers confused, muscle memory brokeniOS feels iOS, Android feels Android
\n

Security Sins

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
❌ NEVER DOWhy It's Wrong✅ ALWAYS DO
Token in AsyncStorageEasily accessible, stolen on rooted deviceSecureStore / Keychain / EncryptedSharedPreferences
Hardcode API keysReverse engineered from APK/IPAEnvironment variables, secure storage
Skip SSL pinningMITM attacks possiblePin certificates in production
Log sensitive dataLogs can be extractedNever log tokens, passwords, PII
\n

Architecture Sins

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
❌ NEVER DOWhy It's Wrong✅ ALWAYS DO
Business logic in UIUntestable, unmaintainableService layer separation
Global state for everythingUnnecessary re-renders, complexityLocal state default, lift when needed
Deep linking as afterthoughtNotifications, shares brokenPlan deep links from day one
Skip dispose/cleanupMemory leaks, zombie listenersClean up subscriptions, timers
\n
\n

\uD83D\uDCF1 Platform Decision Matrix

\n

When to Unify vs Diverge

\n
                    UNIFY (same on both)          DIVERGE (platform-specific)\n                    ───────────────────           ──────────────────────────\nBusiness Logic      ✅ Always                     -\nData Layer          ✅ Always                     -\nCore Features       ✅ Always                     -\n                    \nNavigation          -                             ✅ iOS: edge swipe, Android: back button\nGestures            -                             ✅ Platform-native feel\nIcons               -                             ✅ SF Symbols vs Material Icons\nDate Pickers        -                             ✅ Native pickers feel right\nModals/Sheets       -                             ✅ iOS: bottom sheet vs Android: dialog\nTypography          -                             ✅ SF Pro vs Roboto (or custom)\nError Dialogs       -                             ✅ Platform conventions for alerts\n
\n

Quick Reference: Platform Defaults

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ElementiOSAndroid
Primary FontSF Pro / SF CompactRoboto
Min Touch Target44pt × 44pt48dp × 48dp
Back NavigationEdge swipe leftSystem back button/gesture
Bottom Tab IconsSF SymbolsMaterial Symbols
Action SheetUIActionSheet from bottomBottom Sheet / Dialog
ProgressSpinnerLinear progress (Material)
Pull to RefreshNative UIRefreshControlSwipeRefreshLayout
\n
\n

\uD83E\uDDE0 Mobile UX Psychology (Quick Reference)

\n

Fitts' Law for Touch

\n
Desktop: Cursor is precise (1px)\nMobile:  Finger is imprecise (~7mm contact area)\n\n→ Touch targets MUST be 44-48px minimum\n→ Important actions in THUMB ZONE (bottom of screen)\n→ Destructive actions AWAY from easy reach\n
\n

Thumb Zone (One-Handed Usage)

\n
┌─────────────────────────────┐\n│      HARD TO REACH          │ ← Navigation, menu, back\n│        (stretch)            │\n├─────────────────────────────┤\n│      OK TO REACH            │ ← Secondary actions\n│       (natural)             │\n├─────────────────────────────┤\n│      EASY TO REACH          │ ← PRIMARY CTAs, tab bar\n│    (thumb's natural arc)    │ ← Main content interaction\n└─────────────────────────────┘\n        [  HOME  ]\n
\n

Mobile-Specific Cognitive Load

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
DesktopMobile Difference
Multiple windowsONE task at a time
Keyboard shortcutsTouch gestures
Hover statesNO hover (tap or nothing)
Large viewportLimited space, scroll vertical
Stable attentionInterrupted constantly
\n

For deep dive: touch-psychology.md

\n
\n

⚡ Performance Principles (Quick Reference)

\n

React Native Critical Rules

\n
// ✅ CORRECT: Memoized renderItem + React.memo wrapper\nconst ListItem = React.memo(({ item }: { item: Item }) => (\n  <View style={styles.item}>\n    <Text>{item.title}</Text>\n  </View>\n));\n\nconst renderItem = useCallback(\n  ({ item }: { item: Item }) => <ListItem item={item} />,\n  []\n);\n\n// ✅ CORRECT: FlatList with all optimizations\n<FlatList\n  data={items}\n  renderItem={renderItem}\n  keyExtractor={(item) => item.id}  // Stable ID, NOT index\n  getItemLayout={(data, index) => ({\n    length: ITEM_HEIGHT,\n    offset: ITEM_HEIGHT * index,\n    index,\n  })}\n  removeClippedSubviews={true}\n  maxToRenderPerBatch={10}\n  windowSize={5}\n/>\n
\n

Flutter Critical Rules

\n
// ✅ CORRECT: const constructors prevent rebuilds\nclass MyWidget extends StatelessWidget {\n  const MyWidget({super.key}); // CONST!\n\n  @override\n  Widget build(BuildContext context) {\n    return const Column( // CONST!\n      children: [\n        Text('Static content'),\n        MyConstantWidget(),\n      ],\n    );\n  }\n}\n\n// ✅ CORRECT: Targeted state with ValueListenableBuilder\nValueListenableBuilder<int>(\n  valueListenable: counter,\n  builder: (context, value, child) => Text('$value'),\n  child: const ExpensiveWidget(), // Won't rebuild!\n)\n
\n

Animation Performance

\n
GPU-accelerated (FAST):     CPU-bound (SLOW):\n├── transform               ├── width, height\n├── opacity                 ├── top, left, right, bottom\n└── (use these ONLY)        ├── margin, padding\n                            └── (AVOID animating these)\n
\n

For complete guide: mobile-performance.md

\n
\n

\uD83D\uDCDD CHECKPOINT (MANDATORY Before Any Mobile Work)

\n
\n

Before writing ANY mobile code, you MUST complete this checkpoint:

\n
\n
\uD83E\uDDE0 CHECKPOINT:\n\nPlatform:   [ iOS / Android / Both ]\nFramework:  [ React Native / Flutter / SwiftUI / Kotlin ]\nFiles Read: [ List the skill files you've read ]\n\n3 Principles I Will Apply:\n1. _______________\n2. _______________\n3. _______________\n\nAnti-Patterns I Will Avoid:\n1. _______________\n2. _______________\n
\n

Example:

\n
\uD83E\uDDE0 CHECKPOINT:\n\nPlatform:   iOS + Android (Cross-platform)\nFramework:  React Native + Expo\nFiles Read: touch-psychology.md, mobile-performance.md, platform-ios.md, platform-android.md\n\n3 Principles I Will Apply:\n1. FlatList with React.memo + useCallback for all lists\n2. 48px touch targets, thumb zone for primary CTAs\n3. Platform-specific navigation (edge swipe iOS, back button Android)\n\nAnti-Patterns I Will Avoid:\n1. ScrollView for lists → FlatList\n2. Inline renderItem → Memoized\n3. AsyncStorage for tokens → SecureStore\n
\n
\n

\uD83D\uDD34 Can't fill the checkpoint? → GO BACK AND READ THE SKILL FILES.

\n
\n
\n

\uD83D\uDD27 Framework Decision Tree

\n
WHAT ARE YOU BUILDING?\n        │\n        ├── Need OTA updates + rapid iteration + web team\n        │   └── ✅ React Native + Expo\n        │\n        ├── Need pixel-perfect custom UI + performance critical\n        │   └── ✅ Flutter\n        │\n        ├── Deep native features + single platform focus\n        │   ├── iOS only → SwiftUI\n        │   └── Android only → Kotlin + Jetpack Compose\n        │\n        ├── Existing RN codebase + new features\n        │   └── ✅ React Native (bare workflow)\n        │\n        └── Enterprise + existing Flutter codebase\n            └── ✅ Flutter\n
\n

For complete decision trees: decision-trees.md

\n
\n

\uD83D\uDCCB Pre-Development Checklist

\n

Before Starting ANY Mobile Project

\n\n

Before Every Screen

\n\n

Before Release

\n\n
\n

\uD83D\uDCDA Reference Files

\n

For deeper guidance on specific areas:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
FileWhen to Use
mobile-design-thinking.mdFIRST! Anti-memorization, forces context-based thinking
touch-psychology.mdUnderstanding touch interaction, Fitts' Law, gesture design
mobile-performance.mdOptimizing RN/Flutter, 60fps, memory/battery
platform-ios.mdiOS-specific design, HIG compliance
platform-android.mdAndroid-specific design, Material Design 3
mobile-navigation.mdNavigation patterns, deep linking
mobile-typography.mdType scale, system fonts, accessibility
mobile-color-system.mdOLED optimization, dark mode, battery
decision-trees.mdFramework, state, storage decisions
\n
\n
\n

Remember: Mobile users are impatient, interrupted, and using imprecise fingers on small screens. Design for the WORST conditions: bad network, one hand, bright sun, low battery. If it works there, it works everywhere.

\n
\n","files":[{"path":"decision-trees.md","sizeBytes":16320,"isText":true},{"path":"mobile-backend.md","sizeBytes":14686,"isText":true},{"path":"mobile-color-system.md","sizeBytes":10211,"isText":true},{"path":"mobile-debugging.md","sizeBytes":4250,"isText":true},{"path":"mobile-design-thinking.md","sizeBytes":17227,"isText":true},{"path":"mobile-navigation.md","sizeBytes":11855,"isText":true},{"path":"mobile-performance.md","sizeBytes":19305,"isText":true},{"path":"mobile-testing.md","sizeBytes":11027,"isText":true},{"path":"mobile-typography.md","sizeBytes":10717,"isText":true},{"path":"platform-android.md","sizeBytes":19541,"isText":true},{"path":"platform-ios.md","sizeBytes":17127,"isText":true},{"path":"scripts/mobile_audit.py","sizeBytes":35976,"isText":true},{"path":"SKILL.md","sizeBytes":15455,"isText":true},{"path":"touch-psychology.md","sizeBytes":16848,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"clean","suspicious":0,"notes":0,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-10-05T22:00:02.858413Z","sha256":"7E9529421EE06A90FB7B43A4B8BD7EF65D5A65D4C61B9A5EB2BED7D632D2BAA4","sizeBytes":76698},"review":null,"source":{"repositoryUrl":"https://github.com/VoDaiLocz/kilo-kit-mcp","path":"skills/design/mobile-design","license":"Apache-2.0","commit":"0448e6c050b84e0c0be0030593bd51cabbce3c81","subtreeSha":"B5129C07B8B2095C6AE4751EC7CA5B1E2FC328DE4EED4D49518B6819E4E1D330","lastSyncedAt":"2026-10-05T21:52:59.855581Z"},"reviewedAt":"2026-10-05T22:15:38.051764Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/VoDaiLocz/kilo-kit-mcp/tree/main/skills/design/mobile-design"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install vodailocz-kilo-kit-mcp@llmmart"},{"target":"git","command":"git clone https://github.com/VoDaiLocz/kilo-kit-mcp.git"}]}