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

, content))\n has_jest = bool(re.search(r'jest|describe\\(|test\\(|it\\(', content))\n\n testing_tools = []\n if has_jest: testing_tools.append('Jest')\n if has_rntl: testing_tools.append('RNTL')\n if has_detox: testing_tools.append('Detox')\n if has_maestro: testing_tools.append('Maestro')\n\n if len(testing_tools) == 0:\n self.warnings.append(f\"[Testing] {filename}: No testing framework detected. Consider Jest (unit) + Detox/Maestro (E2E) for mobile.\")\n\n # 13.2 Test Pyramid Balance Check\n test_files = len(re.findall(r'\\.test\\.(tsx|ts|js|jsx)|\\.spec\\.', content))\n e2e_tests = len(re.findall(r'detox|maestro|e2e|spec\\.e2e', content.lower()))\n\n if test_files > 0 and e2e_tests == 0:\n self.warnings.append(f\"[Testing] {filename}: Unit tests found but no E2E tests. Mobile needs E2E on real devices for complete coverage.\")\n\n # 13.3 Accessibility Label Check (Mobile-specific)\n if is_react_native:\n has_pressable = bool(re.search(r'Pressable|TouchableOpacity|TouchableHighlight', content))\n has_a11y_label = bool(re.search(r'accessibilityLabel|aria-label|testID', content))\n if has_pressable and not has_a11y_label:\n self.warnings.append(f\"[A11y Mobile] {filename}: Touchable element without accessibilityLabel. Screen readers need labels for all interactive elements.\")\n\n # --- 14. MOBILE DEBUGGING CHECKS ---\n\n # 14.1 Performance Profiling Check\n has_performance = bool(re.search(r'Performance|systrace|profile|Flipper', content))\n has_console_log = len(re.findall(r'console\\.(log|warn|error|debug|info)', content))\n has_debugger = bool(re.search(r'debugger|__DEV__|React\\.DevTools', content))\n\n if has_console_log > 10:\n self.warnings.append(f\"[Debugging] {filename}: {has_console_log} console.log statements. Remove before production; they block JS thread.\")\n\n if has_performance:\n self.passed_count += 1 # Good performance monitoring\n\n # 14.2 Error Boundary Check\n has_error_boundary = bool(re.search(r'ErrorBoundary|componentDidCatch|getDerivedStateFromError', content))\n if not has_error_boundary and is_react_native:\n self.warnings.append(f\"[Debugging] {filename}: No ErrorBoundary detected. Consider adding ErrorBoundary to prevent app crashes.\")\n\n # 14.3 Hermes Check (React Native specific)\n if is_react_native:\n # Check if using Hermes engine (should be default in modern RN)\n # This is more of a configuration check, not code pattern\n self.passed_count += 1 # Hermes is default in RN 0.70+\n\n def audit_directory(self, directory: str) -> None:\n extensions = {'.tsx', '.ts', '.jsx', '.js', '.dart'}\n for root, dirs, files in os.walk(directory):\n dirs[:] = [d for d in dirs if d not in {'node_modules', '.git', 'dist', 'build', '.next', 'ios', 'android', 'build', '.idea'}]\n for file in files:\n if Path(file).suffix in extensions:\n self.audit_file(os.path.join(root, file))\n\n def get_report(self):\n return {\n \"files_checked\": self.files_checked,\n \"issues\": self.issues,\n \"warnings\": self.warnings,\n \"passed_checks\": self.passed_count,\n \"compliant\": len(self.issues) == 0\n }\n\n\ndef main():\n if len(sys.argv) \u003c 2:\n print(\"Usage: python mobile_audit.py \u003cdirectory>\")\n sys.exit(1)\n\n path = sys.argv[1]\n is_json = \"--json\" in sys.argv\n\n auditor = MobileAuditor()\n if os.path.isfile(path):\n auditor.audit_file(path)\n else:\n auditor.audit_directory(path)\n\n report = auditor.get_report()\n\n if is_json:\n print(json.dumps(report, indent=2))\n else:\n print(f\"\\n[MOBILE AUDIT] {report['files_checked']} mobile files checked\")\n print(\"-\" * 50)\n if report['issues']:\n print(f\"[!] ISSUES ({len(report['issues'])}):\")\n for i in report['issues'][:10]:\n print(f\" - {i}\")\n if report['warnings']:\n print(f\"[*] WARNINGS ({len(report['warnings'])}):\")\n for w in report['warnings'][:15]:\n print(f\" - {w}\")\n print(f\"[+] PASSED CHECKS: {report['passed_checks']}\")\n status = \"PASS\" if report['compliant'] else \"FAIL\"\n print(f\"STATUS: {status}\")\n\n sys.exit(0 if report['compliant'] else 1)\n\n\nif __name__ == \"__main__\":\n # Fix missing import\n import re\n main()\n","content_type":"text/x-python; charset=utf-8","language":"python","size":35976,"content_sha256":"7d9f7b6813c8decb159462259ce09a6bc91ecfc602971c20ca3919981ac9efe6"},{"filename":"touch-psychology.md","content":"# Touch Psychology Reference\n\n> Deep dive into mobile touch interaction, Fitts' Law for touch, thumb zone anatomy, gesture psychology, and haptic feedback.\n> **This is the mobile equivalent of ux-psychology.md - CRITICAL for all mobile work.**\n\n---\n\n## 1. Fitts' Law for Touch\n\n### The Fundamental Difference\n\n```\nDESKTOP (Mouse/Trackpad):\n├── Cursor size: 1 pixel (precision)\n├── Visual feedback: Hover states\n├── Error cost: Low (easy to retry)\n└── Target acquisition: Fast, precise\n\nMOBILE (Finger):\n├── Contact area: ~7mm diameter (imprecise)\n├── Visual feedback: No hover, only tap\n├── Error cost: High (frustrating retries)\n├── Occlusion: Finger covers the target\n└── Target acquisition: Slower, needs larger targets\n```\n\n### Fitts' Law Formula Adapted\n\n```\nTouch acquisition time = a + b × log₂(1 + D/W)\n\nWhere:\n├── D = Distance to target\n├── W = Width of target\n└── For touch: W must be MUCH larger than desktop\n```\n\n### Minimum Touch Target Sizes\n\n| Platform | Minimum | Recommended | Use For |\n|----------|---------|-------------|---------|\n| **iOS (HIG)** | 44pt × 44pt | 48pt+ | All tappable elements |\n| **Android (Material)** | 48dp × 48dp | 56dp+ | All tappable elements |\n| **WCAG 2.2** | 44px × 44px | - | Accessibility compliance |\n| **Critical Actions** | - | 56-64px | Primary CTAs, destructive actions |\n\n### Visual Size vs Hit Area\n\n```\n┌─────────────────────────────────────┐\n│ │\n│ ┌─────────────────────────┐ │\n│ │ │ │\n│ │ [ BUTTON ] │ ← Visual: 36px\n│ │ │ │\n│ └─────────────────────────┘ │\n│ │ ← Hit area: 48px (padding extends)\n└─────────────────────────────────────┘\n\n✅ CORRECT: Visual can be smaller if hit area is minimum 44-48px\n❌ WRONG: Making hit area same as small visual element\n```\n\n### Application Rules\n\n| Element | Visual Size | Hit Area |\n|---------|-------------|----------|\n| Icon buttons | 24-32px | 44-48px (padding) |\n| Text links | Any | 44px height minimum |\n| List items | Full width | 48-56px height |\n| Checkboxes/Radio | 20-24px | 44-48px tap area |\n| Close/X buttons | 24px | 44px minimum |\n| Tab bar items | Icon 24-28px | Full tab width, 49px height (iOS) |\n\n---\n\n## 2. Thumb Zone Anatomy\n\n### One-Handed Phone Usage\n\n```\nResearch shows: 49% of users hold phone one-handed.\n\n┌─────────────────────────────────────┐\n│ │\n│ ┌─────────────────────────────┐ │\n│ │ HARD TO REACH │ │ ← Status bar, top nav\n│ │ (requires stretch) │ │ Put: Back, menu, settings\n│ │ │ │\n│ ├─────────────────────────────┤ │\n│ │ │ │\n│ │ OK TO REACH │ │ ← Content area\n│ │ (comfortable) │ │ Put: Secondary actions, content\n│ │ │ │\n│ ├─────────────────────────────┤ │\n│ │ │ │\n│ │ EASY TO REACH │ │ ← Tab bar, FAB zone\n│ │ (thumb's arc) │ │ Put: PRIMARY CTAs!\n│ │ │ │\n│ └─────────────────────────────┘ │\n│ │\n│ [ HOME ] │\n└─────────────────────────────────────┘\n```\n\n### Thumb Arc (Right-Handed User)\n\n```\nRight hand holding phone:\n\n┌───────────────────────────────┐\n│ STRETCH STRETCH OK │\n│ │\n│ STRETCH OK EASY │\n│ │\n│ OK EASY EASY │\n│ │\n│ EASY EASY EASY │\n└───────────────────────────────┘\n\nLeft hand is mirrored.\n→ Design for BOTH hands or assume right-dominant\n```\n\n### Placement Guidelines\n\n| Element Type | Ideal Position | Reason |\n|--------------|----------------|--------|\n| **Primary CTA** | Bottom center/right | Easy thumb reach |\n| **Tab bar** | Bottom | Natural thumb position |\n| **FAB** | Bottom right | Easy for right hand |\n| **Navigation** | Top (stretch) | Less frequent use |\n| **Destructive actions** | Top left | Hard to reach = harder to accidentally tap |\n| **Dismiss/Cancel** | Top left | Convention + safety |\n| **Confirm/Done** | Top right or bottom | Convention |\n\n### Large Phone Considerations (>6\")\n\n```\nOn large phones, top 40% becomes \"dead zone\" for one-handed use.\n\nSolutions:\n├── Reachability features (iOS)\n├── Pull-down interfaces (drawer pulls content down)\n├── Bottom sheet navigation\n├── Floating action buttons\n└── Gesture-based alternatives to top actions\n```\n\n---\n\n## 3. Touch vs Click Psychology\n\n### Expectation Differences\n\n| Aspect | Click (Desktop) | Touch (Mobile) |\n|--------|-----------------|----------------|\n| **Feedback timing** | Can wait 100ms | Expect instant (\u003c50ms) |\n| **Visual feedback** | Hover → Click | Immediate tap response |\n| **Error tolerance** | Easy retry | Frustrating, feels broken |\n| **Precision** | High | Low |\n| **Context menu** | Right-click | Long press |\n| **Cancel action** | ESC key | Swipe away, outside tap |\n\n### Touch Feedback Requirements\n\n```\nTap → Immediate visual change (\u003c 50ms)\n├── Highlight state (background color change)\n├── Scale down slightly (0.95-0.98)\n├── Ripple effect (Android Material)\n├── Haptic feedback for confirmation\n└── Never nothing!\n\nLoading → Show within 100ms\n├── If action takes > 100ms\n├── Show spinner/progress\n├── Disable button (prevent double tap)\n└── Optimistic UI when possible\n```\n\n### The \"Fat Finger\" Problem\n\n```\nProblem: Finger occludes target during tap\n├── User can't see exactly where they're tapping\n├── Visual feedback appears UNDER finger\n└── Increases error rate\n\nSolutions:\n├── Show feedback ABOVE touch point (tooltips)\n├── Use cursor-like offset for precision tasks\n├── Magnification loupe for text selection\n└── Large enough targets that precision doesn't matter\n```\n\n---\n\n## 4. Gesture Psychology\n\n### Gesture Discoverability Problem\n\n```\nProblem: Gestures are INVISIBLE.\n├── User must discover/remember them\n├── No hover/visual hint\n├── Different mental model than tap\n└── Many users never discover gestures\n\nSolution: Always provide visible alternative\n├── Swipe to delete → Also show delete button or menu\n├── Pull to refresh → Also show refresh button\n├── Pinch to zoom → Also show zoom controls\n└── Gestures as shortcuts, not only way\n```\n\n### Common Gesture Conventions\n\n| Gesture | Universal Meaning | Usage |\n|---------|-------------------|-------|\n| **Tap** | Select, activate | Primary action |\n| **Double tap** | Zoom in, like/favorite | Quick action |\n| **Long press** | Context menu, selection mode | Secondary options |\n| **Swipe horizontal** | Navigation, delete, actions | List actions |\n| **Swipe down** | Refresh, dismiss | Pull to refresh |\n| **Pinch** | Zoom in/out | Maps, images |\n| **Two-finger scroll** | Scroll within scroll | Nested scrolls |\n\n### Gesture Affordance Design\n\n```\nSwipe actions need visual hints:\n\n┌─────────────────────────────────────────┐\n│ ┌───┐ │\n│ │ ≡ │ Item with hidden actions... → │ ← Edge hint (partial color)\n│ └───┘ │\n└─────────────────────────────────────────┘\n\n✅ Good: Slight color peek at edge suggesting swipe\n✅ Good: Drag handle icon ( ≡ ) suggesting reorder\n✅ Good: Onboarding tooltip explaining gesture\n❌ Bad: Hidden gestures with no visual affordance\n```\n\n### Platform Gesture Differences\n\n| Gesture | iOS | Android |\n|---------|-----|---------|\n| **Back** | Edge swipe from left | System back button/gesture |\n| **Share** | Action sheet | Share sheet |\n| **Context menu** | Long press / Force touch | Long press |\n| **Dismiss modal** | Swipe down | Back button or swipe |\n| **Delete in list** | Swipe left, tap delete | Swipe left, immediate or undo |\n\n---\n\n## 5. Haptic Feedback Patterns\n\n### Why Haptics Matter\n\n```\nHaptics provide:\n├── Confirmation without looking\n├── Richer, more premium feel\n├── Accessibility (blind users)\n├── Reduced error rate\n└── Emotional satisfaction\n\nWithout haptics:\n├── Feels \"cheap\" or web-like\n├── User unsure if action registered\n└── Missed opportunity for delight\n```\n\n### iOS Haptic Types\n\n| Type | Intensity | Use Case |\n|------|-----------|----------|\n| `selection` | Light | Picker scroll, toggle, selection |\n| `light` | Light | Minor actions, hover equivalent |\n| `medium` | Medium | Standard tap confirmation |\n| `heavy` | Strong | Important completed, drop |\n| `success` | Pattern | Task completed successfully |\n| `warning` | Pattern | Warning, attention needed |\n| `error` | Pattern | Error occurred |\n\n### Android Haptic Types\n\n| Type | Use Case |\n|------|----------|\n| `CLICK` | Standard tap feedback |\n| `HEAVY_CLICK` | Important actions |\n| `DOUBLE_CLICK` | Confirm actions |\n| `TICK` | Scroll/scrub feedback |\n| `LONG_PRESS` | Long press activation |\n| `REJECT` | Error/invalid action |\n\n### Haptic Usage Guidelines\n\n```\n✅ DO use haptics for:\n├── Button taps\n├── Toggle switches\n├── Picker/slider values\n├── Pull to refresh trigger\n├── Successful action completion\n├── Errors and warnings\n├── Swipe action thresholds\n└── Important state changes\n\n❌ DON'T use haptics for:\n├── Every scroll position\n├── Every list item\n├── Background events\n├── Passive displays\n└── Too frequently (haptic fatigue)\n```\n\n### Haptic Intensity Mapping\n\n| Action Importance | Haptic Level | Example |\n|-------------------|--------------|---------|\n| Minor/Browsing | Light / None | Scrolling, hovering |\n| Standard Action | Medium / Selection | Tap, toggle |\n| Significant Action | Heavy / Success | Complete, confirm |\n| Critical/Destructive | Heavy / Warning | Delete, payment |\n| Error | Error pattern | Failed action |\n\n---\n\n## 6. Mobile Cognitive Load\n\n### How Mobile Differs from Desktop\n\n| Factor | Desktop | Mobile | Implication |\n|--------|---------|--------|-------------|\n| **Attention** | Focused sessions | Interrupted constantly | Design for micro-sessions |\n| **Context** | Controlled environment | Anywhere, any condition | Handle bad lighting, noise |\n| **Multitasking** | Multiple windows | One app visible | Complete task in-app |\n| **Input speed** | Fast (keyboard) | Slow (touch typing) | Minimize input, smart defaults |\n| **Error recovery** | Easy (undo, back) | Harder (no keyboard shortcuts) | Prevent errors, easy recovery |\n\n### Reducing Mobile Cognitive Load\n\n```\n1. ONE PRIMARY ACTION per screen\n └── Clear what to do next\n \n2. PROGRESSIVE DISCLOSURE\n └── Show only what's needed now\n \n3. SMART DEFAULTS\n └── Pre-fill what you can\n \n4. CHUNKING\n └── Break long forms into steps\n \n5. RECOGNITION over RECALL\n └── Show options, don't make user remember\n \n6. CONTEXT PERSISTENCE\n └── Save state on interrupt/background\n```\n\n### Miller's Law for Mobile\n\n```\nDesktop: 7±2 items in working memory\nMobile: Reduce to 5±1 (more distractions)\n\nNavigation: Max 5 tab bar items\nOptions: Max 5 per menu level\nSteps: Max 5 visible steps in progress\n```\n\n### Hick's Law for Mobile\n\n```\nMore choices = slower decisions\n\nMobile impact: Even worse than desktop\n├── Smaller screen = less overview\n├── Scrolling required = items forgotten\n├── Interruptions = lost context\n└── Decision fatigue faster\n\nSolution: Progressive disclosure\n├── Start with 3-5 options\n├── \"More\" for additional\n├── Smart ordering (most used first)\n└── Previous selections remembered\n```\n\n---\n\n## 7. Touch Accessibility\n\n### Motor Impairment Considerations\n\n```\nUsers with motor impairments may:\n├── Have tremors (need larger targets)\n├── Use assistive devices (different input method)\n├── Have limited reach (one-handed necessity)\n├── Need more time (avoid timeouts)\n└── Make accidental touches (need confirmation)\n\nDesign responses:\n├── Generous touch targets (48dp+)\n├── Adjustable timing for gestures\n├── Undo for destructive actions\n├── Switch control support\n└── Voice control support\n```\n\n### Touch Target Spacing (A11y)\n\n```\nWCAG 2.2 Success Criterion 2.5.8:\n\nTouch targets MUST have:\n├── Width: ≥ 44px\n├── Height: ≥ 44px\n├── Spacing: ≥ 8px from adjacent targets\n\nOR the target is:\n├── Inline (within text)\n├── User-controlled (user can resize)\n├── Essential (no alternative design)\n```\n\n### Accessible Touch Patterns\n\n| Pattern | Accessible Implementation |\n|---------|---------------------------|\n| Swipe actions | Provide menu alternative |\n| Drag and drop | Provide select + move option |\n| Pinch zoom | Provide zoom buttons |\n| Force touch | Provide long press alternative |\n| Shake gesture | Provide button alternative |\n\n---\n\n## 8. Emotion in Touch\n\n### The Premium Feel\n\n```\nWhat makes touch feel \"premium\":\n├── Instant response (\u003c 50ms)\n├── Appropriate haptic feedback\n├── Smooth 60fps animations\n├── Correct resistance/physics\n├── Sound feedback (when appropriate)\n└── Attention to spring physics\n```\n\n### Emotional Touch Feedback\n\n| Emotion | Touch Response |\n|---------|----------------|\n| Success | Haptic success + confetti/check |\n| Error | Haptic error + shake animation |\n| Warning | Haptic warning + attention color |\n| Delight | Unexpected smooth animation |\n| Power | Heavy haptic on significant action |\n\n### Trust Building Through Touch\n\n```\nTrust signals in touch interactions:\n├── Consistent behavior (same action = same response)\n├── Reliable feedback (never fails silently)\n├── Secure feel for sensitive actions\n├── Professional animations (not janky)\n└── No accidental actions (confirmation for destructive)\n```\n\n---\n\n## 9. Touch Psychology Checklist\n\n### Before Every Screen\n\n- [ ] **All touch targets ≥ 44-48px?**\n- [ ] **Primary CTA in thumb zone?**\n- [ ] **Destructive actions require confirmation?**\n- [ ] **Gesture alternatives exist (visible buttons)?**\n- [ ] **Haptic feedback on important actions?**\n- [ ] **Immediate visual feedback on tap?**\n- [ ] **Loading states for actions > 100ms?**\n\n### Before Release\n\n- [ ] **Tested on smallest supported device?**\n- [ ] **Tested one-handed on large phone?**\n- [ ] **All gestures have visible alternatives?**\n- [ ] **Haptics work correctly (test on device)?**\n- [ ] **Touch targets tested with accessibility settings?**\n- [ ] **No tiny close buttons or icons?**\n\n---\n\n## 10. Quick Reference Card\n\n### Touch Target Sizes\n\n```\n iOS Android WCAG\nMinimum: 44pt 48dp 44px\nRecommended: 48pt+ 56dp+ -\nSpacing: 8pt+ 8dp+ 8px+\n```\n\n### Thumb Zone Actions\n\n```\nTOP: Navigation, settings, back (infrequent)\nMIDDLE: Content, secondary actions\nBOTTOM: Primary CTA, tab bar, FAB (frequent)\n```\n\n### Haptic Selection\n\n```\nLight: Selection, toggle, minor\nMedium: Tap, standard action\nHeavy: Confirm, complete, drop\nSuccess: Task done\nError: Failed action\nWarning: Attention needed\n```\n\n---\n\n> **Remember:** Every touch is a conversation between user and device. Make it feel natural, responsive, and respectful of human fingers—not precise cursor points.\n","content_type":"text/markdown; charset=utf-8","language":"markdown","size":16848,"content_sha256":"ec131aea1ce39b8d46d1c491ee4839510979d2f60ee7698e2ad1aed2c48b6146"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Mobile Design System","type":"text"}]},{"type":"paragraph","content":[{"text":"(Mobile-First · Touch-First · Platform-Respectful)","type":"text","marks":[{"type":"strong"}]}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Philosophy:","type":"text","marks":[{"type":"strong"}]},{"text":" Touch-first. Battery-conscious. Platform-respectful. Offline-capable. ","type":"text"},{"text":"Core Law:","type":"text","marks":[{"type":"strong"}]},{"text":" Mobile is NOT a small desktop. ","type":"text"},{"text":"Operating Rule:","type":"text","marks":[{"type":"strong"}]},{"text":" Think constraints first, aesthetics second.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"This skill exists to ","type":"text"},{"text":"prevent desktop-thinking, AI-defaults, and unsafe assumptions","type":"text","marks":[{"type":"strong"}]},{"text":" when designing or building mobile applications.","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"1. Mobile Feasibility & Risk Index (MFRI)","type":"text"}]},{"type":"paragraph","content":[{"text":"Before designing or implementing ","type":"text"},{"text":"any mobile feature or screen","type":"text","marks":[{"type":"strong"}]},{"text":", assess feasibility.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"MFRI Dimensions (1–5)","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Dimension","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Question","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Platform Clarity","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Is the target platform (iOS / Android / both) explicitly defined?","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Interaction Complexity","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"How complex are gestures, flows, or navigation?","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Performance Risk","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Does this involve lists, animations, heavy state, or media?","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Offline Dependence","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Does the feature break or degrade without network?","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Accessibility Risk","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Does this impact motor, visual, or cognitive accessibility?","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Score Formula","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"MFRI = (Platform Clarity + Accessibility Readiness)\n − (Interaction Complexity + Performance Risk + Offline Dependence)","type":"text"}]},{"type":"paragraph","content":[{"text":"Range:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"-10 → +10","type":"text","marks":[{"type":"code_inline"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Interpretation","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"MFRI","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Meaning","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Required Action","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"6–10","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Safe","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Proceed normally","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"3–5","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Moderate","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Add performance + UX validation","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"0–2","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Risky","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Simplify interactions or architecture","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"\u003c 0","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Dangerous","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Redesign before implementation","type":"text"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"2. Mandatory Thinking Before Any Work","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"⛔ STOP: Ask Before Assuming (Required)","type":"text"}]},{"type":"paragraph","content":[{"text":"If ","type":"text"},{"text":"any of the following are not explicitly stated","type":"text","marks":[{"type":"strong"}]},{"text":", you MUST ask before proceeding:","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Aspect","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Question","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Why","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Platform","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"iOS, Android, or both?","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Affects navigation, gestures, typography","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Framework","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"React Native, Flutter, or native?","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Determines performance and patterns","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Navigation","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Tabs, stack, drawer?","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Core UX architecture","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Offline","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Must it work offline?","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Data & sync strategy","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Devices","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Phone only or tablet too?","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Layout & density rules","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Audience","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Consumer, enterprise, accessibility needs?","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Touch & readability","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"🚫 ","type":"text"},{"text":"Never default to your favorite stack or pattern.","type":"text","marks":[{"type":"strong"}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"3. Mandatory Reference Reading (Enforced)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Universal (Always Read First)","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"File","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Purpose","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Status","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-design-thinking.md","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Anti-memorization, context-forcing","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"🔴 REQUIRED FIRST","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"touch-psychology.md","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Fitts’ Law, thumb zones, gestures","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"🔴 REQUIRED","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-performance.md","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"60fps, memory, battery","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"🔴 REQUIRED","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-backend.md","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Offline sync, push, APIs","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"🔴 REQUIRED","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-testing.md","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Device & E2E testing","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"🔴 REQUIRED","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-debugging.md","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Native vs JS debugging","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"🔴 REQUIRED","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Platform-Specific (Conditional)","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Platform","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"File","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"iOS","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"platform-ios.md","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Android","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"platform-android.md","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Cross-platform","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"BOTH above","type":"text"}]}]}]}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"❌ If you haven’t read the platform file, you are not allowed to design UI.","type":"text"}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"4. AI Mobile Anti-Patterns (Hard Bans)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"🚫 Performance Sins (Non-Negotiable)","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"❌ Never","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Why","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"✅ Always","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"ScrollView for long lists","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Memory explosion","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"FlatList / FlashList / ListView.builder","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Inline renderItem","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Re-renders all rows","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"useCallback + memo","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Index as key","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Reorder bugs","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Stable ID","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"JS-thread animations","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Jank","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Native driver / GPU","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"console.log in prod","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"JS thread block","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Strip logs","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"No memoization","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Battery + perf drain","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"React.memo / const widgets","type":"text"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"🚫 Touch & UX Sins","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"❌ Never","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Why","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"✅ Always","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Touch \u003c44–48px","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Miss taps","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Min touch target","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Gesture-only action","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Excludes users","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Button fallback","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"No loading state","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Feels broken","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Explicit feedback","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"No error recovery","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Dead end","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Retry + message","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Ignore platform norms","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Muscle memory broken","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"iOS ≠ Android","type":"text"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":3},"content":[{"text":"🚫 Security Sins","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"❌ Never","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Why","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"✅ Always","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Tokens in AsyncStorage","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Easily stolen","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"SecureStore / Keychain","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Hardcoded secrets","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Reverse engineered","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Env + secure storage","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"No SSL pinning","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"MITM risk","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Cert pinning","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Log sensitive data","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"PII leakage","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Never log secrets","type":"text"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"5. Platform Unification vs Divergence Matrix","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"UNIFY DIVERGE\n────────────────────────── ─────────────────────────\nBusiness logic Navigation behavior\nData models Gestures\nAPI contracts Icons\nValidation Typography\nError semantics Pickers / dialogs","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Platform Defaults","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Element","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"iOS","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Android","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Font","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"SF Pro","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Roboto","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Min touch","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"44pt","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"48dp","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Back","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Edge swipe","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"System back","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Sheets","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Bottom sheet","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Dialog / sheet","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Icons","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"SF Symbols","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Material Icons","type":"text"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"6. Mobile UX Psychology (Non-Optional)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Fitts’ Law (Touch Reality)","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Finger ≠ cursor","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accuracy is low","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Reach matters more than precision","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Rules:","type":"text","marks":[{"type":"strong"}]}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Primary CTAs live in ","type":"text"},{"text":"thumb zone","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Destructive actions pushed away","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"No hover assumptions","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"7. Performance Doctrine","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"React Native (Required Pattern)","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"ts"},"content":[{"text":"const Row = React.memo(({ item }) => (\n \u003cView>\u003cText>{item.title}\u003c/Text>\u003c/View>\n));\n\nconst renderItem = useCallback(\n ({ item }) => \u003cRow item={item} />,\n []\n);\n\n\u003cFlatList\n data={items}\n renderItem={renderItem}\n keyExtractor={(i) => i.id}\n getItemLayout={(_, i) => ({\n length: ITEM_HEIGHT,\n offset: ITEM_HEIGHT * i,\n index: i,\n })}\n/>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Flutter (Required Pattern)","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"dart"},"content":[{"text":"class Item extends StatelessWidget {\n const Item({super.key});\n\n @override\n Widget build(BuildContext context) {\n return const Text('Static');\n }\n}","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"const","type":"text","marks":[{"type":"code_inline"}]},{"text":" everywhere possible","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Targeted rebuilds only","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"8. Mandatory Mobile Checkpoint","type":"text"}]},{"type":"paragraph","content":[{"text":"Before writing ","type":"text"},{"text":"any code","type":"text","marks":[{"type":"strong"}]},{"text":", you must complete this:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"🧠 MOBILE CHECKPOINT\n\nPlatform: ___________\nFramework: ___________\nFiles Read: ___________\n\n3 Principles I Will Apply:\n1.\n2.\n3.\n\nAnti-Patterns I Will Avoid:\n1.\n2.","type":"text"}]},{"type":"paragraph","content":[{"text":"❌ Cannot complete → go back and read.","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"9. Framework Decision Tree (Canonical)","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"Need OTA + web team → React Native + Expo\nHigh-perf UI → Flutter\niOS only → SwiftUI\nAndroid only → Compose","type":"text"}]},{"type":"paragraph","content":[{"text":"No debate without justification.","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"10. Release Readiness Checklist","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Before Shipping","type":"text"}]},{"type":"checkbox_list","attrs":{"id":null},"content":[{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Touch targets ≥ 44–48px","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Offline handled","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Secure storage used","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Lists optimized","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Logs stripped","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Tested on low-end devices","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Accessibility labels present","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"MFRI ≥ 3","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"11. Related Skills","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"frontend-design","type":"text","marks":[{"type":"strong"}]},{"text":" – Visual systems & components","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"frontend-dev-guidelines","type":"text","marks":[{"type":"strong"}]},{"text":" – RN/TS architecture","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"backend-dev-guidelines","type":"text","marks":[{"type":"strong"}]},{"text":" – Mobile-safe APIs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"error-tracking","type":"text","marks":[{"type":"strong"}]},{"text":" – Crash & performance telemetry","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Final Law:","type":"text","marks":[{"type":"strong"}]},{"text":" Mobile users are distracted, interrupted, and impatient—often using one hand on a bad network with low battery. ","type":"text"},{"text":"Design for that reality, or your app will fail quietly.","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use","type":"text"}]},{"type":"paragraph","content":[{"text":"This skill is applicable to execute the workflow or actions described in the overview.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Limitations","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use this skill only when the task clearly matches the scope described above.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Do not treat the output as a substitute for environment-specific validation, testing, or expert review.","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}}]},"metadata":{"date":"2026-06-05","name":"mobile-design","risk":"unknown","author":"@skillopedia","source":{"stars":39376,"repo_name":"antigravity-awesome-skills","origin_url":"https://github.com/sickn33/antigravity-awesome-skills/blob/HEAD/skills/mobile-design/SKILL.md","repo_owner":"sickn33","body_sha256":"2e10a05bd01ca2d6fd5135fc72dc5a8fbca00ebd007d8dc16b149e69c3f29a68","cluster_key":"423b97f1ba8fed3919d505f1495cdb9e37848b2a33d2f4af07cba1a344345045","clean_bundle":{"format":"clean-skill-bundle-v1","source":"sickn33/antigravity-awesome-skills/skills/mobile-design/SKILL.md","attachments":[{"id":"9912c3e7-0dbc-5ffe-b807-4311108ed6c2","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/9912c3e7-0dbc-5ffe-b807-4311108ed6c2/attachment.md","path":"decision-trees.md","size":16320,"sha256":"ed7e218bdd40a6d6614974acf4d54772bc6384536d747ac7e4f378870388b0d3","contentType":"text/markdown; charset=utf-8"},{"id":"007b27af-de2a-5bb8-ac4d-2321bf94f42b","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/007b27af-de2a-5bb8-ac4d-2321bf94f42b/attachment.md","path":"mobile-backend.md","size":14686,"sha256":"b46b4c0d122de115ed85a8ea814c898cebecb6338f58008b8ce23f28d136dcb2","contentType":"text/markdown; charset=utf-8"},{"id":"b74dce5c-3ec5-55a3-b1f2-1d3016bcfadf","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/b74dce5c-3ec5-55a3-b1f2-1d3016bcfadf/attachment.md","path":"mobile-color-system.md","size":10211,"sha256":"9e6e302b1a03179811cbe15b8cba70eca5c6dbd42396d9efbc331d704c9b86b1","contentType":"text/markdown; charset=utf-8"},{"id":"91952d3c-f348-51bc-9364-f13e736de1c7","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/91952d3c-f348-51bc-9364-f13e736de1c7/attachment.md","path":"mobile-debugging.md","size":4250,"sha256":"647fed510688212d3025c3f1ab06aae44dc5c19d245521de400d2575699e8008","contentType":"text/markdown; charset=utf-8"},{"id":"2ee279d8-1df6-5f67-b92a-4990a586d590","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/2ee279d8-1df6-5f67-b92a-4990a586d590/attachment.md","path":"mobile-design-thinking.md","size":17227,"sha256":"0f0f8aa1e4b081c61de164572c46ccee716904ca1a4483e3bd0d2ed7996b074a","contentType":"text/markdown; charset=utf-8"},{"id":"90780132-d318-5192-818e-4cd4a01d8be5","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/90780132-d318-5192-818e-4cd4a01d8be5/attachment.md","path":"mobile-navigation.md","size":11855,"sha256":"1d9aefcd45146bc39aa4ac12b27e89343cc1f206ea2dafa41269e72433930711","contentType":"text/markdown; charset=utf-8"},{"id":"3553479b-3307-5b3b-8192-70cb2ed3f2ff","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/3553479b-3307-5b3b-8192-70cb2ed3f2ff/attachment.md","path":"mobile-performance.md","size":19305,"sha256":"1acdf49acba81035b6e11870b5e2b80e2b585178f6b524065c6937fb42da7059","contentType":"text/markdown; charset=utf-8"},{"id":"07b464e8-0c2f-580c-8e5e-bb0136e75521","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/07b464e8-0c2f-580c-8e5e-bb0136e75521/attachment.md","path":"mobile-testing.md","size":11027,"sha256":"a940bd0c2d5204f83b1b8e2214e938e2a4b0e68e72e7b63b175c33d7bb8bdd12","contentType":"text/markdown; charset=utf-8"},{"id":"d10c6cca-1242-5cf7-9829-fa767fd4b220","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/d10c6cca-1242-5cf7-9829-fa767fd4b220/attachment.md","path":"mobile-typography.md","size":10717,"sha256":"40253bb17ed0bdacef06c0f0f27233ba03274aa1587f0c96215025aaefc0316a","contentType":"text/markdown; charset=utf-8"},{"id":"80fdde9a-39e5-5bc2-828f-91d6cf005d44","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/80fdde9a-39e5-5bc2-828f-91d6cf005d44/attachment.md","path":"platform-android.md","size":19541,"sha256":"672a828fa4cd2d85dfe6aba379c1f65bffd4d9abf484da58e2d39b6abf0b16ef","contentType":"text/markdown; charset=utf-8"},{"id":"5c114c04-899c-5544-8de0-f9d65f909b9f","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/5c114c04-899c-5544-8de0-f9d65f909b9f/attachment.md","path":"platform-ios.md","size":17127,"sha256":"3843ee18984f68ab5fa022976f2015429788baff5f8af0dd56d6298792e09396","contentType":"text/markdown; charset=utf-8"},{"id":"94bea3cb-2c21-530b-875b-086ca1db5beb","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/94bea3cb-2c21-530b-875b-086ca1db5beb/attachment.py","path":"scripts/mobile_audit.py","size":35976,"sha256":"7d9f7b6813c8decb159462259ce09a6bc91ecfc602971c20ca3919981ac9efe6","contentType":"text/x-python; charset=utf-8"},{"id":"0293c0a9-25f4-5980-a65e-35956d7dfc11","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/0293c0a9-25f4-5980-a65e-35956d7dfc11/attachment.md","path":"touch-psychology.md","size":16848,"sha256":"ec131aea1ce39b8d46d1c491ee4839510979d2f60ee7698e2ad1aed2c48b6146","contentType":"text/markdown; charset=utf-8"}],"bundle_sha256":"f655a8f92d73ff113b2b40789ba594c74cf9528cfa7f75cd35986481e3f85c5c","attachment_count":13,"text_attachments":13,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":4,"skill_md_path":"skills/mobile-design/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"design-ux","category_label":"Design"},"exact_dupes_collapsed_into_this":3},"version":"v1","category":"design-ux","date_added":"2026-02-27","import_tag":"clean-skills-v1","description":"(Mobile-First · Touch-First · Platform-Respectful)"}},"renderedAt":1782980357906}

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