mobile-design
使用设计最佳实践构建移动应用
移动应用失败的常见原因是开发者沿用桌面思维。本技能教授移动优先设计原则、触摸心理学、性能优化以及iOS和Android平台的特定约定。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「mobile-design」。 我应该如何为iOS和Android在React Native应用中实现导航？
預期結果:
基于移动设计原则：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滥用、缺失记忆化以及生产环境中的console.log。
跨平台设计验证
使用平台统一矩阵决定哪些元素应在iOS和Android之间统一实现，哪些应采用平台特定实现。
試試這些提示
使用mobile-design技能中的MFRI框架，评估[平台]应用的功能请求：[描述功能]。可行性评分是多少？需要考虑哪些因素？
检查此React Native/Flutter代码片段是否存在移动性能问题。检查以下方面：ScrollView与FlatList的使用、React.memo的使用、renderItem的useCallback、keyExtractor使用稳定ID、以及应删除的console.log语句： ``` [paste code here] ```
最佳實務
- 在实施前始终使用MFRI评估功能可行性——评分低于3分需要重新设计
- 在设计任何移动UI之前，先阅读平台特定文件（platform-ios.md、platform-android.md）
- 在编写任何代码之前应用强制性移动检查点——记录平台、框架和设计原则
避免
- 将桌面网页模式应用到移动端（可滚动div、悬停状态、大字体）
- 忽略平台约定——iOS和Android具有不同的导航、手势和组件模式
- 忽略离线考虑——移动用户经常失去连接，需要优雅降级