用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/ranbot-ai/awesome-skills --skill mobile-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | mobile-design |
| description | (Mobile-First · Touch-First · Platform-Respectful) |
| category | Creative & Media |
| source | antigravity |
| tags | ["react","api","ai","workflow","design","security","rag","cro"] |
| url | https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/mobile-design |
(Mobile-First · Touch-First · Platform-Respectful)
Philosophy: Touch-first. Battery-conscious. Platform-respectful. Offline-capable. Core Law: Mobile is NOT a small desktop. Operating Rule: Think constraints first, aesthetics second.
This skill exists to prevent desktop-thinking, AI-defaults, and unsafe assumptions when designing or building mobile applications.
Before designing or implementing any mobile feature or screen, assess feasibility.
| Dimension | Question |
|---|---|
| Platform Clarity | Is the target platform (iOS / Android / both) explicitly defined? |
| Interaction Complexity | How complex are gestures, flows, or navigation? |
| Performance Risk | Does this involve lists, animations, heavy state, or media? |
| Offline Dependence | Does the feature break or degrade without network? |
| Accessibility Risk | Does this impact motor, visual, or cognitive accessibility? |
MFRI = (Platform Clarity + Accessibility Readiness)
− (Interaction Complexity + Performance Risk + Offline Dependence)
Range: -10 → +10
| MFRI | Meaning | Required Action |
|---|---|---|
| 6–10 | Safe | Proceed normally |
| 3–5 | Moderate | Add performance + UX validation |
| 0–2 | Risky | Simplify interactions or architecture |
| < 0 | Dangerous | Redesign before implementation |
If any of the following are not explicitly stated, you MUST ask before proceeding:
| Aspect | Question | Why |
|---|---|---|
| Platform | iOS, Android, or both? | Affects navigation, gestures, typography |
| Framework | React Native, Flutter, or native? | Determines performance and patterns |
| Navigation | Tabs, stack, drawer? | Core UX architecture |
| Offline | Must it work offline? | Data & sync strategy |
| Devices | Phone only or tablet too? | Layout & density rules |
| Audience | Consumer, enterprise, accessibility needs? | Touch & readability |
🚫 Never default to your favorite stack or pattern.
| File | Purpose | Status |
|---|---|---|
| mobile-design-thinking.md | Anti-memorization, context-forcing | 🔴 REQUIRED FIRST |
| touch-psychology.md | Fitts’ Law, thumb zones, gestures | 🔴 REQUIRED |
| mobile-performance.md | 60fps, memory, battery | 🔴 REQUIRED |
| mobile-backend.md | Offline sync, push, APIs | 🔴 REQUIRED |
| mobile-testing.md | Device & E2E testing | 🔴 REQUIRED |
| mobile-debugging.md | Native vs JS debugging | 🔴 REQUIRED |
| Platform | File |
|---|---|
| iOS | platform-ios.md |
| Android | platform-android.md |
| Cross-platform | BOTH above |
❌ If you haven’t read the platform file, you are not allowed to design UI.
| ❌ Never | Why | ✅ Always |
|---|---|---|
| ScrollView for long lists | Memory explosion | FlatList / FlashList / ListView.builder |
| Inline renderItem | Re-renders all rows | useCallback + memo |
| Index as key | Reorder bugs | Stable ID |
| JS-thread animations | Jank | Native driver / GPU |
| console.log in prod | JS thread block | Strip logs |
| No memoization | Battery + perf drain | React.memo / const widgets |
| ❌ Never | Why | ✅ Alway