Mobile Design
Mobile Design is an design AI skill with a core value of Mobile-first design and engineering doctrine for iOS and Android apps. It
helps developers solve real-world problems in the design domain, boosting
efficiency, automating repetitive tasks, and optimizing workflows.
Mobile-first design and engineering doctrine for iOS and Android apps. Covers touch interaction, performance, platform conventions, offline behavior, and mobile-specific decision-making. Teaches pr...
Quick Facts
mkdir -p ./skills/mobile-design && curl -sfL https://raw.githubusercontent.com/sickn33/antigravity-awesome-skills/main/skills/mobile-design/SKILL.md -o ./skills/mobile-design/SKILL.mdRun in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).
Skill Content
# Mobile Design System
**(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.
---
1. Mobile Feasibility & Risk Index (MFRI)
Before designing or implementing **any mobile feature or screen**, assess feasibility.
MFRI Dimensions (1–5)
| 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? |
Score Formula
MFRI = (Platform Clarity + Accessibility Readiness)
− (Interaction Complexity + Performance Risk + Offline Dependence)**Range:** `-10 → +10`
Interpretation
| 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 |
---
2. Mandatory Thinking Before Any Work
⛔ STOP: Ask Before Assuming (Required)
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.**
---
3. Mandatory Reference Reading (Enforced)
Universal (Always Read First)
| 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-Specific (Conditional)
| Platform | File |
| -------------- | ------------------- |
| iOS | platform-ios.md |
| Android | platform-android.md |
| Cross-platform | BOTH above |
> ❌ If you haven’t re
🎯 Best For
- Claude users
- Designers
- Creative professionals
- Product teams
💡 Use Cases
- Design system documentation
- Component specification creation
📖 How to Use This Skill
- 1
Install the Skill
Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.
- 2
Load into Your AI Assistant
Open Claude and reference the skill. Paste the SKILL.md content or use the system prompt tab.
- 3
Apply Mobile Design to Your Work
Provide context for your task — paste source material, describe your audience, or share existing work to guide the AI.
- 4
Review and Refine
Edit the AI output for accuracy, tone, and completeness. Add human insight where the AI lacks context.
❓ Frequently Asked Questions
Does Mobile Design generate production-ready design specs?
It generates detailed specifications that developers can use directly. Review and adjust for your specific design system.
How do I install Mobile Design?
Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/mobile-design/SKILL.md, ready to use.
Can I customize this skill for my team?
Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.
⚠️ Common Mistakes to Avoid
Not reading the full skill
Skills contain important context and edge cases beyond the quick start.