mobile-design — Skillopedia

Mobile Design System Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Principle: Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice. --- 🔧 Runtime Scripts Execute these for validation (don't read, just run): | Script | Purpose | Usage | |--------|---------|-------| | | Mobile UX & Touch Audit | | --- 🔴 MANDATORY: Read Reference Files Before Working! ⛔ DO NOT start development until you read the relevant files: Universal (Always Read) | File | Content | Status | |------|---------|--------| | mobile-design-thinking.md | ⚠️ ANTI-M…

, 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":"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 Principle:","type":"text","marks":[{"type":"strong"}]},{"text":" Mobile is NOT a small desktop. THINK mobile constraints, ASK platform choice.","type":"text"}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"🔧 Runtime Scripts","type":"text"}]},{"type":"paragraph","content":[{"text":"Execute these for validation (don't read, just run):","type":"text","marks":[{"type":"strong"}]}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Script","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":"Usage","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"scripts/mobile_audit.py","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Mobile UX & Touch Audit","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"python scripts/mobile_audit.py \u003cproject_path>","type":"text","marks":[{"type":"code_inline"}]}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"🔴 MANDATORY: Read Reference Files Before Working!","type":"text"}]},{"type":"paragraph","content":[{"text":"⛔ DO NOT start development until you read the relevant files:","type":"text","marks":[{"type":"strong"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Universal (Always Read)","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":"Content","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":"link","attrs":{"href":"mobile-design-thinking.md","title":null}},{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⚠️ ANTI-MEMORIZATION: Forces thinking, prevents AI defaults","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ CRITICAL FIRST","type":"text","marks":[{"type":"strong"}]}]}]}]},{"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":"link","attrs":{"href":"touch-psychology.md","title":null}},{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Fitts' Law, gestures, haptics, thumb zone","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ CRITICAL","type":"text","marks":[{"type":"strong"}]}]}]}]},{"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":"link","attrs":{"href":"mobile-performance.md","title":null}},{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"RN/Flutter performance, 60fps, memory","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ CRITICAL","type":"text","marks":[{"type":"strong"}]}]}]}]},{"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":"link","attrs":{"href":"mobile-backend.md","title":null}},{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Push notifications, offline sync, mobile API","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ CRITICAL","type":"text","marks":[{"type":"strong"}]}]}]}]},{"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":"link","attrs":{"href":"mobile-testing.md","title":null}},{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Testing pyramid, E2E, platform-specific","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ CRITICAL","type":"text","marks":[{"type":"strong"}]}]}]}]},{"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":"link","attrs":{"href":"mobile-debugging.md","title":null}},{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Native vs JS debugging, Flipper, Logcat","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ CRITICAL","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-navigation.md","type":"text","marks":[{"type":"link","attrs":{"href":"mobile-navigation.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Tab/Stack/Drawer, deep linking","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ Read","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-typography.md","type":"text","marks":[{"type":"link","attrs":{"href":"mobile-typography.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"System fonts, Dynamic Type, a11y","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ Read","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-color-system.md","type":"text","marks":[{"type":"link","attrs":{"href":"mobile-color-system.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"OLED, dark mode, battery-aware","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ Read","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"decision-trees.md","type":"text","marks":[{"type":"link","attrs":{"href":"decision-trees.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Framework/state/storage selection","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"⬜ Read","type":"text"}]}]}]}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"🧠 ","type":"text"},{"text":"mobile-design-thinking.md is PRIORITY!","type":"text","marks":[{"type":"strong"}]},{"text":" This file ensures AI thinks instead of using memorized patterns.","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Platform-Specific (Read Based on Target)","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":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Content","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"When to Read","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"iOS","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"platform-ios.md","type":"text","marks":[{"type":"link","attrs":{"href":"platform-ios.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Human Interface Guidelines, SF Pro, SwiftUI patterns","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Building for iPhone/iPad","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Android","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"platform-android.md","type":"text","marks":[{"type":"link","attrs":{"href":"platform-android.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Material Design 3, Roboto, Compose patterns","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Building for Android","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Cross-Platform","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Both above","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Platform divergence points","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"React Native / Flutter","type":"text"}]}]}]}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"🔴 ","type":"text"},{"text":"If building for iOS → Read platform-ios.md FIRST!","type":"text","marks":[{"type":"strong"}]},{"text":" 🔴 ","type":"text"},{"text":"If building for Android → Read platform-android.md FIRST!","type":"text","marks":[{"type":"strong"}]},{"text":" 🔴 ","type":"text"},{"text":"If cross-platform → Read BOTH and apply conditional platform logic!","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"⚠️ CRITICAL: ASK BEFORE ASSUMING (MANDATORY)","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"STOP! If the user's request is open-ended, DO NOT default to your favorites.","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"You MUST Ask If Not Specified:","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":"Ask","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","marks":[{"type":"strong"}]}]}]},{"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 EVERY design decision","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Framework","type":"text","marks":[{"type":"strong"}]}]}]},{"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 patterns and tools","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Navigation","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"\"Tab bar, drawer, or stack-based?\"","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Core UX decision","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"State","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"\"What state management? (Zustand/Redux/Riverpod/BLoC?)\"","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Architecture foundation","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Offline","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"\"Does this need to work offline?\"","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Affects data strategy","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Target devices","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"\"Phone only, or tablet support?\"","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Layout complexity","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"⛔ AI MOBILE ANTI-PATTERNS (YASAK LİSTESİ)","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"🚫 ","type":"text"},{"text":"These are AI default tendencies that MUST be avoided!","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Performance 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 DO","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Why It's Wrong","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"✅ ALWAYS DO","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","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Renders ALL items, memory explodes","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Use ","type":"text"},{"text":"FlatList","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"FlashList","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"ListView.builder","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Inline renderItem function","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"New function every render, all items re-render","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"useCallback","type":"text","marks":[{"type":"code_inline"}]},{"text":" + ","type":"text"},{"text":"React.memo","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Missing keyExtractor","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Index-based keys cause bugs on reorder","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Unique, stable ID from data","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Skip getItemLayout","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Async layout = janky scroll","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Provide when items have fixed height","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"setState() everywhere","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Unnecessary widget rebuilds","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Targeted state, ","type":"text"},{"text":"const","type":"text","marks":[{"type":"code_inline"}]},{"text":" constructors","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Native driver: false","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Animations blocked by JS thread","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"useNativeDriver: true","type":"text","marks":[{"type":"code_inline"}]},{"text":" always","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"console.log in production","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Blocks JS thread severely","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Remove before release build","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Skip React.memo/const","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Every item re-renders on any change","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Memoize list items ALWAYS","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":4},"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 DO","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Why It's Wrong","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"✅ ALWAYS DO","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Touch target \u003c 44px","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Impossible to tap accurately, frustrating","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Minimum 44pt (iOS) / 48dp (Android)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Spacing \u003c 8px between targets","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Accidental taps on neighbors","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Minimum 8-12px gap","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Gesture-only interactions","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Motor impaired users excluded","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Always provide button alternative","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","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"User thinks app crashed","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"ALWAYS show loading feedback","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"No error state","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"User stuck, no recovery path","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Show error with retry option","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"No offline handling","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Crash/block when network lost","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Graceful degradation, cached data","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Ignore platform conventions","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Users confused, muscle memory broken","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"iOS feels iOS, Android feels Android","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":4},"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 DO","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Why It's Wrong","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"✅ ALWAYS DO","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Token in AsyncStorage","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Easily accessible, stolen on rooted device","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"SecureStore","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"Keychain","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"EncryptedSharedPreferences","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Hardcode API keys","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Reverse engineered from APK/IPA","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Environment variables, secure storage","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Skip SSL pinning","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"MITM attacks possible","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Pin certificates in production","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","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Logs can be extracted","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Never log tokens, passwords, PII","type":"text"}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Architecture 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 DO","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Why It's Wrong","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"✅ ALWAYS DO","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Business logic in UI","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Untestable, unmaintainable","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Service layer separation","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Global state for everything","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Unnecessary re-renders, complexity","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Local state default, lift when needed","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Deep linking as afterthought","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Notifications, shares broken","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Plan deep links from day one","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Skip dispose/cleanup","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Memory leaks, zombie listeners","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Clean up subscriptions, timers","type":"text"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"📱 Platform Decision Matrix","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"When to Unify vs Diverge","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":" 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","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Quick Reference: 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":"Primary Font","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"SF Pro / SF Compact","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 Target","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"44pt × 44pt","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"48dp × 48dp","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Back Navigation","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Edge swipe left","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"System back button/gesture","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Bottom Tab Icons","type":"text","marks":[{"type":"strong"}]}]}]},{"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 Symbols","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Action Sheet","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"UIActionSheet from bottom","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Bottom Sheet / Dialog","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Progress","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Spinner","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Linear progress (Material)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Pull to Refresh","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Native UIRefreshControl","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"SwipeRefreshLayout","type":"text"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"🧠 Mobile UX Psychology (Quick Reference)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Fitts' Law for Touch","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"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","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Thumb Zone (One-Handed Usage)","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"┌─────────────────────────────┐\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 ]","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Mobile-Specific Cognitive Load","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":"Desktop","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Mobile Difference","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Multiple windows","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"ONE task at a time","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Keyboard shortcuts","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Touch gestures","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Hover states","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"NO hover (tap or nothing)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Large viewport","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Limited space, scroll vertical","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Stable attention","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Interrupted constantly","type":"text"}]}]}]}]},{"type":"paragraph","content":[{"text":"For deep dive: ","type":"text"},{"text":"touch-psychology.md","type":"text","marks":[{"type":"link","attrs":{"href":"touch-psychology.md","title":null}}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"⚡ Performance Principles (Quick Reference)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"React Native Critical Rules","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"// ✅ CORRECT: Memoized renderItem + React.memo wrapper\nconst ListItem = React.memo(({ item }: { item: Item }) => (\n \u003cView style={styles.item}>\n \u003cText>{item.title}\u003c/Text>\n \u003c/View>\n));\n\nconst renderItem = useCallback(\n ({ item }: { item: Item }) => \u003cListItem item={item} />,\n []\n);\n\n// ✅ CORRECT: FlatList with all optimizations\n\u003cFlatList\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/>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Flutter Critical Rules","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"dart"},"content":[{"text":"// ✅ 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\u003cint>(\n valueListenable: counter,\n builder: (context, value, child) => Text('$value'),\n child: const ExpensiveWidget(), // Won't rebuild!\n)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Animation Performance","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"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)","type":"text"}]},{"type":"paragraph","content":[{"text":"For complete guide: ","type":"text"},{"text":"mobile-performance.md","type":"text","marks":[{"type":"link","attrs":{"href":"mobile-performance.md","title":null}}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"📝 CHECKPOINT (MANDATORY Before Any Mobile Work)","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Before writing ANY mobile code, you MUST complete this checkpoint:","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"🧠 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. _______________","type":"text"}]},{"type":"paragraph","content":[{"text":"Example:","type":"text","marks":[{"type":"strong"}]}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"🧠 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","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"🔴 ","type":"text"},{"text":"Can't fill the checkpoint? → GO BACK AND READ THE SKILL FILES.","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"🔧 Framework Decision Tree","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":""},"content":[{"text":"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","type":"text"}]},{"type":"paragraph","content":[{"text":"For complete decision trees: ","type":"text"},{"text":"decision-trees.md","type":"text","marks":[{"type":"link","attrs":{"href":"decision-trees.md","title":null}}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"📋 Pre-Development Checklist","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Before Starting ANY Mobile Project","type":"text"}]},{"type":"checkbox_list","attrs":{"id":null},"content":[{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Platform confirmed?","type":"text","marks":[{"type":"strong"}]},{"text":" (iOS / Android / Both)","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Framework chosen?","type":"text","marks":[{"type":"strong"}]},{"text":" (RN / Flutter / Native)","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Navigation pattern decided?","type":"text","marks":[{"type":"strong"}]},{"text":" (Tabs / Stack / Drawer)","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"State management selected?","type":"text","marks":[{"type":"strong"}]},{"text":" (Zustand / Redux / Riverpod / BLoC)","type":"text"}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Offline requirements known?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Deep linking planned from day one?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Target devices defined?","type":"text","marks":[{"type":"strong"}]},{"text":" (Phone / Tablet / Both)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Before Every Screen","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","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Primary CTA in thumb zone?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Loading state exists?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Error state with retry exists?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Offline handling considered?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Platform conventions followed?","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Before Release","type":"text"}]},{"type":"checkbox_list","attrs":{"id":null},"content":[{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"console.log removed?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"SecureStore for sensitive data?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"SSL pinning enabled?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Lists optimized (memo, keyExtractor)?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Memory cleanup on unmount?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Tested on low-end devices?","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"checkbox_item","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"text":"Accessibility labels on all interactive elements?","type":"text","marks":[{"type":"strong"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"📚 Reference Files","type":"text"}]},{"type":"paragraph","content":[{"text":"For deeper guidance on specific areas:","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":"When to Use","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":"link","attrs":{"href":"mobile-design-thinking.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"FIRST! Anti-memorization, forces context-based thinking","type":"text","marks":[{"type":"strong"}]}]}]}]},{"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":"link","attrs":{"href":"touch-psychology.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Understanding touch interaction, Fitts' Law, gesture design","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":"link","attrs":{"href":"mobile-performance.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Optimizing RN/Flutter, 60fps, memory/battery","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"platform-ios.md","type":"text","marks":[{"type":"link","attrs":{"href":"platform-ios.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"iOS-specific design, HIG compliance","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"platform-android.md","type":"text","marks":[{"type":"link","attrs":{"href":"platform-android.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Android-specific design, Material Design 3","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-navigation.md","type":"text","marks":[{"type":"link","attrs":{"href":"mobile-navigation.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Navigation patterns, deep linking","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-typography.md","type":"text","marks":[{"type":"link","attrs":{"href":"mobile-typography.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Type scale, system fonts, accessibility","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mobile-color-system.md","type":"text","marks":[{"type":"link","attrs":{"href":"mobile-color-system.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"OLED optimization, dark mode, battery","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"decision-trees.md","type":"text","marks":[{"type":"link","attrs":{"href":"decision-trees.md","title":null}}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Framework, state, storage decisions","type":"text"}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Remember:","type":"text","marks":[{"type":"strong"}]},{"text":" 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.","type":"text"}]}]}]},"metadata":{"date":"2026-11-02","name":"mobile-design","author":"@skillopedia","source":{"stars":33070,"repo_name":"claude-code-templates","origin_url":"https://github.com/davila7/claude-code-templates/blob/HEAD/cli-tool/components/skills/creative-design/mobile-design/SKILL.md","repo_owner":"davila7","body_sha256":"ec74cda5e1954572e4282c3aaa9c1c32ec743cef83c53f8aef622c00dc8f0682","cluster_key":"749ddf7c20e10dedf1aaafa29b597633c3f72554d0fac32fdee4a2866c1176bc","clean_bundle":{"format":"clean-skill-bundle-v1","source":"davila7/claude-code-templates/cli-tool/components/skills/creative-design/mobile-design/SKILL.md","text_bytes":205090,"source_commit":"93a77f1f4dc1d731d534cff2c71835cc99685964","skills_sh_rank":9025,"attachment_count":13,"text_attachments":13,"attachment_storage":"skill_attachments","binary_attachments":0},"cluster_size":1,"skill_md_path":"cli-tool/components/skills/creative-design/mobile-design/SKILL.md","import_metadata":{"date":"2026-11-02","author":"@skillopedia","version":"v1","category":"design-ux","category_label":"Design"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"design-ux","import_tag":"skills-sh-top20k-2026-11","description":"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.","allowed-tools":"Read, Glob, Grep, Bash"}},"renderedAt":1793666572469}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.