mobile-design
運用設計最佳實踐打造行動應用程式
行動應用程式失敗的原因在於開發者套用桌面思維。此技能教授行動優先設計原則、觸控心理學、效能優化，以及 iOS 和 Android 的平台特定規範。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「mobile-design」。 如何為 iOS 和 Android 實作 React Native 應用程式的導覽？
預期結果:
根據 mobile-design 原則：1) 使用 React Navigation 搭配底部標籤頁 (最多 5 個項目)，2) 設定 lazy: false 以保留標籤頁狀態，3) 為 Android 硬體返回按鈕添加 BackHandler 監聽器，4) 使用 iOS 安全區域處理，5) 考慮平台特定導覽模式 - iOS 使用邊緣滑動，而 Android 使用系統返回。
正在使用「mobile-design」。 React Native 列表應避免哪些關鍵效能問題？
預期結果:
關鍵問題：1) 切勿對長列表使用 ScrollView 搭配 .map() - 應使用 FlatList，2) 始終將列表項目包裹在 React.memo 中，3) 對 renderItem 函數使用 useCallback，4) 切勿使用索引作為 key - 應使用穩定 ID，5) 對動畫使用 useNativeDriver: true，6) 生產環境前移除所有 console.log 陳述式。
安全審計
安全This skill is a legitimate mobile design and engineering doctrine. All 758 static scanner detections are false positives: backtick characters in markdown documentation, mentions of security terms (Keychain, SAM) in educational context about secure coding practices, and references to cryptographic algorithms in warnings against weak crypto. The included mobile_audit.py is a genuine React Native/Flutter code analysis tool for mobile-specific performance and security issues.
品質評分
你能建構什麼
行動應用程式架構決策
使用框架決策樹和 MFRI，根據專案需求評估應使用 React Native、Flutter 或原生框架進行開發。
效能優化審查
應用行動效能規範審查現有的 React Native 或 Flutter 程式碼，找出常見的效能問題，如滥用 ScrollView、缺少 memoization，以及生產環境中的 console.log。
跨平台設計驗證
使用平台統一矩阵決定哪些元素應在 iOS 和 Android 之間統一，哪些應採用平台特定實作。
試試這些提示
使用 mobile-design 技能中的 MFRI 框架，評估此 [platform] 應用程式的功能需求：[describe feature]。可行性分數是多少？需要處理哪些考量因素？
審查此 React Native/Flutter 程式碼片段是否有行動效能問題。檢查項目：ScrollView 與 FlatList 的選擇、React.memo 使用情況、renderItem 的 useCallback、keyExtractor 是否使用穩定 ID，以及應移除的 console.log 陳述式： ``` [paste code here] ```
對於跨平台行動應用程式，根據 mobile-design 技能的平台矩阵，判斷哪些 UI 元素應在 iOS 和 Android 之間有所區隔。範例元素：[navigation pattern]。提供建議並說明理由。
審查此行動畫面的觸控無障礙性：檢查觸控目標大小 (iOS 最小 44pt，Android 最小 48dp)、主要 CTA 的拇指熱區 placement、滑動手勢的替代方案，以及重要操作的觸覺回饋。
最佳實務
- 實作前務必使用 MFRI 評估功能可行性 - 分數低於 3 需要重新設計
- 設計任何行動 UI 前，先閱讀平台特定檔案 (platform-ios.md、platform-android.md)
- 撰寫任何程式碼前應用 Mandatory Mobile Checkpoint - 記錄平台、框架和設計原則
避免
- 將桌面網頁模式套用於行動端 (可滾動 div、懸停狀態、大型字體)
- 忽略平台規範 - iOS 和 Android 有不同的導覽、手勢和元件模式
- 跳過離線考量 - 行動使用者經常失去連線，期望優雅降級