Menu
iOS 和 Android 應用的行動優先設計思維與決策。觸控互動、效能模式、平台慣例。教導原則而非固定值。用於建構 React Native、Flutter 或原生行動應用。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
使用 Claude API / Anthropic SDK 建構、除錯和最佳化應用程式。使用此技能建構的應用程式應包含提示快取 (prompt caching)。也處理在 Claude 模型版本之間遷移現有 Claude API 程式碼（4.5 → 4.6，4.6 → 4.7，替換已退役模型）。觸發時機：程式碼匯入 anthropic/@anthropic-ai/sdk；使用者要求使用 Claude API、Anthropic SDKs 或 Managed Agents (/v1/agents, /v1/sessions, /v1/environments)；使用者在檔案中新增/修改/調整 Claude 功能（快取、思考、壓縮、工具使用、批次、檔案、引用、記憶）或模型（Opus/Sonnet/Haiku）；關於 Anthropic SDK 專案中提示快取/快取命中率的問題。不觸發：檔案匯入 `openai`/其他提供者 SDK，檔案名稱類似 `*-openai.py`/`*-generic.py`，與提供者無關的程式碼，一般程式設計/機器學習。
當編寫呼叫 Gemini API 的程式碼時請使用此技能，用於文字生成、多輪對話、多模態理解、影像生成、串流回應、背景研究任務、函式呼叫、結構化輸出，或從舊的 generateContent API 遷移。此技能涵蓋 Interactions API，這是在 Python 與 TypeScript 中使用 Gemini 模型與代理的建議方式。
Tailwind CSS v4 原則。CSS 優先配置、容器查詢、現代模式、設計 token 架構。
處理使用 Gemini Live API 的即時、雙向串流應用程式時使用此技能。涵蓋基於 WebSocket 的音訊/視訊/文字串流、語音活動偵測 (VAD)、原生音訊功能、函式呼叫、會話管理、用戶端身分驗證的臨時權杖，以及所有 Live API 設定選項。涵蓋的 SDK - google-genai (Python)、@google/genai (JavaScript/TypeScript)。
Python 開發原則與決策。框架選擇、非同步模式、型別提示、專案結構。教你思考而非複製。
自動代理選擇與智慧任務路由。分析使用者請求並自動選擇最佳專家代理，無需使用者明確提及。
| name | mobile-design |
| description | iOS 和 Android 應用的行動優先設計思維與決策。觸控互動、效能模式、平台慣例。教導原則而非固定值。用於建構 React Native、Flutter 或原生行動應用。 |
| allowed-tools | Read, Glob, Grep, Bash |
哲學： 觸控優先。電池意識。尊重平台。離線能力。 核心原則： 行動不是小桌面。思考行動約束，詢問平台選擇。
執行這些進行驗證（不要閱讀，直接執行）：
| 腳本 | 用途 | 使用方式 |
|---|---|---|
scripts/mobile_audit.py | 行動 UX 與觸控稽核 | python scripts/mobile_audit.py <project_path> |
| 檔案 | 內容 | 狀態 |
|---|---|---|
| mobile-design-thinking.md | 反記憶：強制思考 | ⬜ 最關鍵 |
| touch-psychology.md | 費茲定律、手勢、觸覺、拇指區 | ⬜ 關鍵 |
| mobile-performance.md | RN/Flutter 效能、60fps、記憶體 | ⬜ 關鍵 |
| mobile-backend.md | 推播通知、離線同步、行動 API | ⬜ 關鍵 |
| mobile-testing.md | 測試金字塔、E2E、平台特定 | ⬜ 關鍵 |
| mobile-debugging.md | 原生 vs JS 除錯、Flipper、Logcat | ⬜ 關鍵 |
| mobile-navigation.md | Tab/Stack/Drawer、深連結 | ⬜ 閱讀 |
| mobile-typography.md | 系統字型、動態字型、無障礙 | ⬜ 閱讀 |
| mobile-color-system.md | OLED、暗色模式、電池意識 | ⬜ 閱讀 |
| decision-trees.md | 框架/狀態/儲存選擇 | ⬜ 閱讀 |
| 平台 | 檔案 | 何時閱讀 |
|---|---|---|
| iOS | platform-ios.md | 為 iPhone/iPad 建構 |
| Android | platform-android.md | 為 Android 建構 |
| 跨平台 | 以上兩者 | React Native / Flutter |
| 面向 | 詢問 | 原因 |
|---|---|---|
| 平台 | 「iOS、Android 還是兩者？」 | 影響每個設計決策 |
| 框架 | 「React Native、Flutter 還是原生？」 | 決定模式和工具 |
| 導航 | 「Tab bar、抽屜還是堆疊式？」 | 核心 UX 決策 |
| 狀態 | 「什麼狀態管理？」 | 架構基礎 |
| 離線 | 「需要離線工作嗎？」 | 影響資料策略 |
| ❌ 絕不 | 為什麼錯 | ✅ 始終 |
|---|---|---|
| ScrollView 用於長列表 | 渲染所有項目，記憶體爆炸 | 使用 FlatList / FlashList |
| 行內 renderItem 函式 | 每次渲染都新函式 | useCallback + React.memo |
| 缺少 keyExtractor | 索引鍵在重排序時有 bug | 資料中的唯一穩定 ID |
| 生產環境 console.log | 嚴重阻塞 JS 執行緒 | 發布前移除 |
| ❌ 絕不 | 為什麼錯 | ✅ 始終 |
|---|---|---|
| 觸控目標 < 44px | 無法準確點擊 | 最小 44pt(iOS)/48dp(Android) |
| 無載入狀態 | 使用者以為應用當掉 | 始終顯示載入回饋 |
| 無錯誤狀態 | 使用者卡住 | 帶重試的錯誤顯示 |
| 忽略平台慣例 | 使用者困惑 | iOS 感覺像 iOS |
| ❌ 絕不 | 為什麼錯 | ✅ 始終 |
|---|---|---|
| Token 存在 AsyncStorage | 在 root 裝置容易存取 | SecureStore / Keychain |
| 寫死 API 金鑰 | 從 APK/IPA 反向工程 | 環境變數、安全儲存 |
| 元素 | iOS | Android |
|---|---|---|
| 主要字型 | SF Pro | Roboto |
| 最小觸控目標 | 44pt × 44pt | 48dp × 48dp |
| 返回導航 | 邊緣左滑 | 系統返回按鈕/手勢 |
| 底部 Tab 圖示 | SF Symbols | Material Symbols |
桌面：游標精確（1px）
行動：手指不精確（~7mm 接觸面積）
→ 觸控目標必須至少 44-48px
→ 重要動作放在拇指區（螢幕底部）
→ 破壞性動作遠離容易觸及之處
┌─────────────────────────────┐
│ 難以觸及 │ ← 導航、選單、返回
│ （伸展） │
├─────────────────────────────┤
│ 尚可觸及 │ ← 次要動作
│ （自然） │
├─────────────────────────────┤
│ 容易觸及 │ ← 主要 CTA、tab bar
│ （拇指自然弧線） │ ← 主要內容互動
└─────────────────────────────┘
[ HOME ]
你要建構什麼？
│
├── 需要 OTA 更新 + 快速迭代 + Web 團隊
│ └── ✅ React Native + Expo
│
├── 需要像素完美自訂 UI + 效能關鍵
│ └── ✅ Flutter
│
├── 深度原生功能 + 單一平台焦點
│ ├── 僅 iOS → SwiftUI
│ └── 僅 Android → Kotlin + Jetpack Compose
│
└── 企業 + 現有 Flutter 程式碼庫
└── ✅ Flutter
記住： 行動使用者沒有耐心、會被打斷、且在小螢幕上用不精確的手指。為最差條件設計：差網路、單手、大太陽、低電量。如果在那裡能運作，到處都能運作。