{"id":"c8abaab8-b124-495c-9145-21fdb794ee5f","shortId":"K6pzDw","kind":"skill","title":"mobile-design","tagline":"(Mobile-First · Touch-First · Platform-Respectful)","description":"# 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 / Android / 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| **< 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 / FlashList / 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 / GPU                     |\n| console.log in prod       | JS thread block      | Strip logs                              |\n| No memoization            | Battery + perf drain | React.memo / const widgets              |\n\n---\n\n### 🚫 Touch & UX Sins\n\n| ❌ Never               | Why                  | ✅ Always          |\n| --------------------- | -------------------- | ----------------- |\n| Touch <44–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 / 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 / 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 / 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  <View><Text>{item.title}</Text></View>\n));\n\nconst renderItem = useCallback(\n  ({ item }) => <Row item={item} />,\n  []\n);\n\n<FlatList\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/>\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/TS 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.","tags":["mobile","design","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-mobile-design","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/mobile-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 35034 github stars · SKILL.md body (9,199 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-25T12:51:04.012Z","embedding":null,"createdAt":"2026-04-18T20:29:24.889Z","updatedAt":"2026-04-25T12:51:04.012Z","lastSeenAt":"2026-04-25T12:51:04.012Z","tsv":"'+10':162 '-10':161 '0':180,187 '1':73,92,676,685 '10':169,720 '11':750 '2':181,192,677,686 '3':173,278,671,678,749 '4':358 '44':430,728 '44pt':536 '48dp':537 '48px':431,729 '5':93,174,501 '6':168,553 '60fps':307 '7':588 '8':653 '9':693 'access':137,146,152,266,745 'accuraci':566 'action':167,440,582,821 'add':176 'aesthet':51 'affect':225 'ai':62,359 'ai-default':61 'allow':354 'alway':284,373,428,471 'android':103,222,336,466,529,713 'anim':122,402 'anti':292,362,680 'anti-memor':291 'anti-pattern':361,679 'api':315,516,772 'app':805 'appli':675 'applic':72,815 'architectur':186,245,764 'ask':199,214,859 'aspect':217 'assess':88 'assum':201 'assumpt':66,587 'asyncstorag':474 'audienc':263 'avoid':684 'away':584 'back':538,542,690 'backend':766 'backend-dev-guidelin':765 'bad':794 'ban':365 'batteri':30,309,417,798 'battery-consci':29 'behavior':512 'block':412 'bottom':544 'boundari':867 'break':132 'broken':449,464 'bug':396 'build':70,640 'buildcontext':641 'busi':509 'button':443 'cannot':687 'canon':697 'capabl':37 'cert':491 'checklist':723 'checkpoint':656,666 'clarif':861 'clariti':97,151 'class':631 'clear':834 'code':660 'cognit':145 'complet':663,688 'complex':108,110,155 'compon':758 'compos':715 'condit':331 'conscious':31 'console.log':407 'const':421,596,601,635,644,647 'constraint':49 'consum':264 'context':295,642 'context-forc':294 'contract':517 'core':38,243 'crash':776 'criteria':870 'cross':339 'cross-platform':338 'ctas':576 'cursor':565 'danger':188 'dart':630 'data':251,495,513,609 'dead':455 'debat':717 'debug':326 'decis':695 'default':63,271,526 'defin':106 'degrad':134 'densiti':261 'depend':128,159 'describ':822,838 'design':3,14,68,80,356,755,799 'desktop':45,59 'desktop-think':58 'destruct':581 'determin':235 'dev':761,767 'devic':254,318,744 'dialog':524,546 'dimens':91,94 'distract':784 'diverg':505,508 'doctrin':590 'drain':419 'drawer':242 'driver':405 'e2e':319 'easili':475 'edg':539 'element':527 'end':456,743 'enforc':282 'engin':482 'enterpris':265 'env':483 'environ':850 'environment-specif':849 'error':453,521,774 'error-track':773 'everywher':648 'exclud':441 'execut':817 'exist':55 'expert':855 'explicit':105,210,450 'explos':379 'expo':704 'extend':633 'fail':807 'fallback':444 'favorit':274 'feasibl':75,89 'featur':85,131 'feedback':451 'feel':448 'file':287,333,350,669 'final':779 'finger':564 'first':6,9,18,21,28,50,286,298 'fitt':300,560 'flashlist':381 'flatlist':380,608 'flow':113 'flutter':232,627,709 'follow':207 'font':530 'forc':296 'formula':148 'framework':229,668,694 'frontend':754,760 'frontend-design':753 'frontend-dev-guidelin':759 'gestur':112,227,304,438,515 'gesture-on':437 'getitemlayout':616 'go':689 'gpu':406 'guidelin':762,768 'hand':791 'handl':731 'hard':364 'hardcod':479 'haven':345 'heavi':123 'height':620,623 'high':706 'high-perf':705 'hover':586 'i.id':615 'icon':518,548,552 'id':398 'ignor':459 'impact':141 'impati':787 'implement':82,191 'index':77,392,625 'inlin':383 'input':864 'interact':107,154,184 'interpret':163 'interrupt':785 'involv':120 'io':102,221,334,465,528,710 'item':599,604,606,607,610,619,622,632,636 'item.title':600 'jank':403 'js':325,400,410 'js-thread':399 'justif':719 'key':394 'keychain':478 'keyextractor':613 'label':746 'law':39,301,561,780 'layout':260 'leakag':497 'length':618 'limit':826 'list':121,377,735 'listview.builder':382 'live':577 'load':446 'log':414,493,499,737 'logic':510 'long':376 'low':568,742,797 'low-end':741 'mandatori':193,279,654 'match':835 'materi':551 'matrix':506 'matter':570 'mean':165 'media':126 'memo':391 'memoiz':416 'memor':293 'memori':308,378,463 'messag':458 'mfri':78,90,149,164,748 'min':434,534 'miss':432,872 'mitm':489 'mobil':2,5,13,17,40,71,74,84,360,554,655,665,770,781 'mobile-backend.md':311 'mobile-debugging.md':322 'mobile-design':1 'mobile-design-thinking.md':290 'mobile-first':4,16 'mobile-performance.md':306 'mobile-saf':769 'mobile-testing.md':317 'model':514 'moder':175 'motor':142 'muscl':462 'must':213,247,662 'nativ':231,234,323,404,592,703 'navig':115,226,239,511 'need':267,698 'negoti':370 'network':136,795 'never':270,371,426,469,498 'non':369,558 'non-negoti':368 'non-opt':557 'norm':461 'normal':172 'offlin':36,127,158,246,250,312,730 'offline-cap':35 'offset':621 'often':788 'one':790 'oper':46 'optim':736 'option':559 'ota':699 'output':844 'overrid':638 'overview':825 'pattern':238,277,363,594,629,681 'perf':418,707 'perform':116,156,177,236,366,589,777 'permiss':865 'philosophi':25 'phone':255 'picker':523 'pii':496 'pin':488,492 'platform':11,23,33,96,101,150,220,329,332,340,349,460,502,525,667 'platform-android.md':337 'platform-ios.md':335 'platform-respect':10,22,32 'platform-specif':328 'possibl':649 'precis':573 'present':747 'prevent':57 'primari':575 'principl':672 'pro':532 'proceed':171,216 'prod':409 'psycholog':556 'purpos':288 'push':314,583 'question':95,218 'quiet':808 'rang':160 're':386 're-rend':385 'reach':569 'react':230,591,702 'react.memo':420,598 'read':281,285,347,670,692 'readabl':269 'readi':153,722 'realiti':563,802 'rebuild':651 'recoveri':454 'redesign':189 'refer':280 'relat':751 'releas':721 'render':387 'renderitem':384,602,611,612 'reorder':395 'requir':166,202,297,305,310,316,321,327,593,628,863 'respect':12,24,34 'retri':457 'return':643 'revers':481 'review':856 'risk':76,117,138,157,490 'riski':182 'rn/ts':763 'roboto':533 'row':389,597,605 'rule':47,262,574 'safe':170,771 'safeti':866 'scope':837 'score':147 'screen':87 'scrollview':374 'second':52 'secret':480,500 'secur':467,484,732 'securestor':477 'semant':522 'sensit':494 'sf':531,549 'sheet':543,545,547 'ship':725 'simplifi':183 'sin':367,425,468 'skill':54,752,813,829 'skill-mobile-design' 'small':44 'source-sickn33' 'specif':330,851 'ssl':487 'stabl':397 'stack':241,275 'state':124,211,447 'statelesswidget':634 'static':646 'status':289 'stolen':476 'stop':198,857 'storag':485,733 'strategi':253 'strip':413,738 'substitut':847 'success':869 'super.key':637 'swiftui':712 'swipe':540 'symbol':550 'sync':252,313 'system':15,541,757 'tab':240 'tablet':258 'tap':433 'target':100,436,650,727 'task':833 'team':701 'telemetri':778 'test':320,739,853 'text':645 'think':48,60,194 'thread':401,411 'thumb':302,579 'token':472 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'touch':8,20,27,268,423,429,435,535,562,726 'touch-first':7,19,26 'touch-psychology.md':299 'track':775 'treat':842 'tree':696 'ts':595 'typographi':228,520 'ui':357,708 'unif':503 'unifi':507 'univers':283 'unsaf':65 'use':734,789,811,827 'usecallback':390,603 'user':442,782 'ux':178,244,424,555 'valid':179,519,852 'visual':143,756 'vs':324,504 'web':700 'widget':422,639 'without':135,718 'work':197,249 'workflow':819 'write':658 'zone':303,580","prices":[{"id":"61208e38-cf2f-4aaa-852b-bd56c86b50f1","listingId":"c8abaab8-b124-495c-9145-21fdb794ee5f","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T20:29:24.889Z"}],"sources":[{"listingId":"c8abaab8-b124-495c-9145-21fdb794ee5f","source":"github","sourceId":"sickn33/antigravity-awesome-skills/mobile-design","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/mobile-design","isPrimary":false,"firstSeenAt":"2026-04-18T21:40:54.061Z","lastSeenAt":"2026-04-25T12:51:04.012Z"},{"listingId":"c8abaab8-b124-495c-9145-21fdb794ee5f","source":"skills_sh","sourceId":"sickn33/antigravity-awesome-skills/mobile-design","sourceUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/mobile-design","isPrimary":true,"firstSeenAt":"2026-04-18T20:29:24.889Z","lastSeenAt":"2026-04-25T12:40:21.403Z"}],"details":{"listingId":"c8abaab8-b124-495c-9145-21fdb794ee5f","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"mobile-design","github":{"repo":"sickn33/antigravity-awesome-skills","stars":35034,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-25T06:33:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"d11822d75eaf240a81b5d3ab3dc69b636bab4a4c","skill_md_path":"skills/mobile-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/mobile-design"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"mobile-design","description":"(Mobile-First · Touch-First · Platform-Respectful)"},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/mobile-design"},"updatedAt":"2026-04-25T12:51:04.012Z"}}