mobile-design
Focuses on creating mobile designs that are easy to use with touch. Ensures apps work well across different platforms.
What it does
This skill helps create mobile apps by prioritizing the user and mobile device constraints. It ensures designs are suitable for small screens, touch interactions, and respect platform-specific rules (iOS or Android).
When to use it
- ✓When starting the design of a new app screen.
- ✓When evaluating if a feature idea will work well on mobile.
- ✓When wanting to avoid common mobile design mistakes.
Example of what to ask your AI
“Evaluate this screen for an iOS app: are the buttons large enough to tap? Does it work offline?”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI checks if the design considers differences between mobile and desktop, if buttons are easy to touch, and if the app performs well even with slow or no internet connection.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill mobile-designOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/mobile-design/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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 read the platform file, you are not allowed to design UI.
4. AI Mobile Anti-Patterns (Hard Bans)
🚫 Performance Sins (Non-Negotiable)
| ❌ Never | Why | ✅ Always |
|---|---|---|
| ScrollView for long lists | Memory explosion | FlatList / FlashList / ListView.builder |
…
FAQ
What does 'Mobile-First' mean?
It means thinking first about how the app will work and look on a mobile phone, which has a smaller screen and is used differently than a computer.
Why is it important to consider 'constraints'?
Mobile devices have less processing power, battery life, and varying internet connections. Considering these prevents the app from becoming slow or non-functional.
What is 'Touch-First'?
It means designing with the understanding that users will interact with the app using their fingers on the screen, so buttons and touch areas need to be large and easy to hit accurately.
Details
Original description by the author
(Mobile-First · Touch-First · Platform-Respectful)
Popularity
- GitHub stars
- 48k
- Ranking position
- #3606
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC