[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-de905eb1-11d2-40cd-9237-c040e55754db":3,"$fO1SG4nujg-bmWq_zuzCZfmO0d5jmGKvVb24DLUtQZ6g":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"de905eb1-11d2-40cd-9237-c040e55754db","mobile-design","移动优先·触控优先·尊重平台","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: mobile-design\ndescription: \"(Mobile-First · Touch-First · Platform-Respectful)\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n# Mobile Design System\n\n**(Mobile-First · Touch-First · Platform-Respectful)**\n\n> **Philosophy:** Touch-first. Battery-conscious. Platform-respectful. Offline-capable.\n> **Core Law:** Mobile is NOT a small desktop.\n> **Operating Rule:** Think constraints first, aesthetics second.\n\nThis skill exists to **prevent desktop-thinking, AI-defaults, and unsafe assumptions** when designing or building mobile applications.\n\n---\n\n## 1. Mobile Feasibility & Risk Index (MFRI)\n\nBefore designing or implementing **any mobile feature or screen**, assess feasibility.\n\n### MFRI Dimensions (1–5)\n\n| Dimension                  | Question                                                          |\n| -------------------------- | ----------------------------------------------------------------- |\n| **Platform Clarity**       | Is the target platform (iOS \u002F Android \u002F both) explicitly defined? |\n| **Interaction Complexity** | How complex are gestures, flows, or navigation?                   |\n| **Performance Risk**       | Does this involve lists, animations, heavy state, or media?       |\n| **Offline Dependence**     | Does the feature break or degrade without network?                |\n| **Accessibility Risk**     | Does this impact motor, visual, or cognitive accessibility?       |\n\n### Score Formula\n\n```\nMFRI = (Platform Clarity + Accessibility Readiness)\n       − (Interaction Complexity + Performance Risk + Offline Dependence)\n```\n\n**Range:** `-10 → +10`\n\n### Interpretation\n\n| MFRI     | Meaning   | Required Action                       |\n| -------- | --------- | ------------------------------------- |\n| **6–10** | Safe      | Proceed normally                      |\n| **3–5**  | Moderate  | Add performance + UX validation       |\n| **0–2**  | Risky     | Simplify interactions or architecture |\n| **\u003C 0**  | Dangerous | Redesign before implementation        |\n\n---\n\n## 2. Mandatory Thinking Before Any Work\n\n### ⛔ STOP: Ask Before Assuming (Required)\n\nIf **any of the following are not explicitly stated**, you MUST ask before proceeding:\n\n| Aspect     | Question                                   | Why                                      |\n| ---------- | ------------------------------------------ | ---------------------------------------- |\n| Platform   | iOS, Android, or both?                     | Affects navigation, gestures, typography |\n| Framework  | React Native, Flutter, or native?          | Determines performance and patterns      |\n| Navigation | Tabs, stack, drawer?                       | Core UX architecture                     |\n| Offline    | Must it work offline?                      | Data & sync strategy                     |\n| Devices    | Phone only or tablet too?                  | Layout & density rules                   |\n| Audience   | Consumer, enterprise, accessibility needs? | Touch & readability                      |\n\n🚫 **Never default to your favorite stack or pattern.**\n\n---\n\n## 3. Mandatory Reference Reading (Enforced)\n\n### Universal (Always Read First)\n\n| File                          | Purpose                            | Status            |\n| ----------------------------- | ---------------------------------- | ----------------- |\n| **mobile-design-thinking.md** | Anti-memorization, context-forcing | 🔴 REQUIRED FIRST |\n| **touch-psychology.md**       | Fitts’ Law, thumb zones, gestures  | 🔴 REQUIRED       |\n| **mobile-performance.md**     | 60fps, memory, battery             | 🔴 REQUIRED       |\n| **mobile-backend.md**         | Offline sync, push, APIs           | 🔴 REQUIRED       |\n| **mobile-testing.md**         | Device & E2E testing               | 🔴 REQUIRED       |\n| **mobile-debugging.md**       | Native vs JS debugging             | 🔴 REQUIRED       |\n\n### Platform-Specific (Conditional)\n\n| Platform       | File                |\n| -------------- | ------------------- |\n| iOS            | platform-ios.md     |\n| Android        | platform-android.md |\n| Cross-platform | BOTH above          |\n\n> ❌ If you haven’t read the platform file, you are not allowed to design UI.\n\n---\n\n## 4. AI Mobile Anti-Patterns (Hard Bans)\n\n### 🚫 Performance Sins (Non-Negotiable)\n\n| ❌ Never                   | Why                  | ✅ Always                                |\n| ------------------------- | -------------------- | --------------------------------------- |\n| ScrollView for long lists | Memory explosion     | FlatList \u002F FlashList \u002F ListView.builder |\n| Inline renderItem         | Re-renders all rows  | useCallback + memo                      |\n| Index as key              | Reorder bugs         | Stable ID                               |\n| JS-thread animations      | Jank                 | Native driver \u002F GPU                     |\n| console.log in prod       | JS thread block      | Strip logs                              |\n| No memoization            | Battery + perf drain | React.memo \u002F const widgets              |\n\n---\n\n### 🚫 Touch & UX Sins\n\n| ❌ Never               | Why                  | ✅ Always          |\n| --------------------- | -------------------- | ----------------- |\n| Touch \u003C44–48px        | Miss taps            | Min touch target  |\n| Gesture-only action   | Excludes users       | Button fallback   |\n| No loading state      | Feels broken         | Explicit feedback |\n| No error recovery     | Dead end             | Retry + message   |\n| Ignore platform norms | Muscle memory broken | iOS ≠ Android     |\n\n---\n\n### 🚫 Security Sins\n\n| ❌ Never                | Why                | ✅ Always               |\n| ---------------------- | ------------------ | ---------------------- |\n| Tokens in AsyncStorage | Easily stolen      | SecureStore \u002F Keychain |\n| Hardcoded secrets      | Reverse engineered | Env + secure storage   |\n| No SSL pinning         | MITM risk          | Cert pinning           |\n| Log sensitive data     | PII leakage        | Never log secrets      |\n\n---\n\n## 5. Platform Unification vs Divergence Matrix\n\n```\nUNIFY                          DIVERGE\n──────────────────────────     ─────────────────────────\nBusiness logic                Navigation behavior\nData models                    Gestures\nAPI contracts                  Icons\nValidation                     Typography\nError semantics                Pickers \u002F dialogs\n```\n\n### Platform Defaults\n\n| Element   | iOS          | Android        |\n| --------- | ------------ | -------------- |\n| Font      | SF Pro       | Roboto         |\n| Min touch | 44pt         | 48dp           |\n| Back      | Edge swipe   | System back    |\n| Sheets    | Bottom sheet | Dialog \u002F sheet |\n| Icons     | SF Symbols   | Material Icons |\n\n---\n\n## 6. Mobile UX Psychology (Non-Optional)\n\n### Fitts’ Law (Touch Reality)\n\n* Finger ≠ cursor\n* Accuracy is low\n* Reach matters more than precision\n\n**Rules:**\n\n* Primary CTAs live in **thumb zone**\n* Destructive actions pushed away\n* No hover assumptions\n\n---\n\n## 7. Performance Doctrine\n\n### React Native (Required Pattern)\n\n```ts\nconst Row = React.memo(({ item }) => (\n  \u003CView>\u003CText>{item.title}\u003C\u002FText>\u003C\u002FView>\n));\n\nconst renderItem = useCallback(\n  ({ item }) => \u003CRow item={item} \u002F>,\n  []\n);\n\n\u003CFlatList\n  data={items}\n  renderItem={renderItem}\n  keyExtractor={(i) => i.id}\n  getItemLayout={(_, i) => ({\n    length: ITEM_HEIGHT,\n    offset: ITEM_HEIGHT * i,\n    index: i,\n  })}\n\u002F>\n```\n\n### Flutter (Required Pattern)\n\n```dart\nclass Item extends StatelessWidget {\n  const Item({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return const Text('Static');\n  }\n}\n```\n\n* `const` everywhere possible\n* Targeted rebuilds only\n\n---\n\n## 8. Mandatory Mobile Checkpoint\n\nBefore writing **any code**, you must complete this:\n\n```\n🧠 MOBILE CHECKPOINT\n\nPlatform:     ___________\nFramework:    ___________\nFiles Read:   ___________\n\n3 Principles I Will Apply:\n1.\n2.\n3.\n\nAnti-Patterns I Will Avoid:\n1.\n2.\n```\n\n❌ Cannot complete → go back and read.\n\n---\n\n## 9. Framework Decision Tree (Canonical)\n\n```\nNeed OTA + web team → React Native + Expo\nHigh-perf UI → Flutter\niOS only → SwiftUI\nAndroid only → Compose\n```\n\nNo debate without justification.\n\n---\n\n## 10. Release Readiness Checklist\n\n### Before Shipping\n\n* [ ] Touch targets ≥ 44–48px\n* [ ] Offline handled\n* [ ] Secure storage used\n* [ ] Lists optimized\n* [ ] Logs stripped\n* [ ] Tested on low-end devices\n* [ ] Accessibility labels present\n* [ ] MFRI ≥ 3\n\n---\n\n## 11. Related Skills\n\n* **frontend-design** – Visual systems & components\n* **frontend-dev-guidelines** – RN\u002FTS architecture\n* **backend-dev-guidelines** – Mobile-safe APIs\n* **error-tracking** – Crash & performance telemetry\n\n---\n\n> **Final Law:**\n> Mobile users are distracted, interrupted, and impatient—often using one hand on a bad network with low battery.\n> **Design for that reality, or your app will fail quietly.**\n\n---\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,98,641,"2026-05-16 13:29:03",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"6bf6f975-88c9-433d-9418-21cafd77d76e","1.0.0","mobile-design.zip",74368,"uploads\u002Fskills\u002Fde905eb1-11d2-40cd-9237-c040e55754db\u002Fmobile-design.zip","39657929124ad3e04b0cae436d384dd2c0804a4c11adb0319fec51d2e5eb8b9c","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":9547},{\"path\":\"decision-trees.md\",\"isDirectory\":false,\"size\":16320},{\"path\":\"mobile-backend.md\",\"isDirectory\":false,\"size\":14686},{\"path\":\"mobile-color-system.md\",\"isDirectory\":false,\"size\":10211},{\"path\":\"mobile-debugging.md\",\"isDirectory\":false,\"size\":4250},{\"path\":\"mobile-design-thinking.md\",\"isDirectory\":false,\"size\":17227},{\"path\":\"mobile-navigation.md\",\"isDirectory\":false,\"size\":11855},{\"path\":\"mobile-performance.md\",\"isDirectory\":false,\"size\":19305},{\"path\":\"mobile-testing.md\",\"isDirectory\":false,\"size\":11027},{\"path\":\"mobile-typography.md\",\"isDirectory\":false,\"size\":10717},{\"path\":\"platform-android.md\",\"isDirectory\":false,\"size\":19541},{\"path\":\"platform-ios.md\",\"isDirectory\":false,\"size\":17127},{\"path\":\"scripts\u002Fmobile_audit.py\",\"isDirectory\":false,\"size\":35976},{\"path\":\"touch-psychology.md\",\"isDirectory\":false,\"size\":16848}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]