메뉴
iOS 和 Android 應用的行動優先設計思維與決策。觸控互動、效能模式、平台慣例。教導原則而非固定值。用於建構 React Native、Flutter 或原生行動應用。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
使用 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
記住： 行動使用者沒有耐心、會被打斷、且在小螢幕上用不精確的手指。為最差條件設計：差網路、單手、大太陽、低電量。如果在那裡能運作，到處都能運作。