mobile-design

Q: How do I install mobile-design?

Run npx skills add https://github.com/aiskillstore/marketplace --skill mobile-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mobile-design/ (personal) or .claude/skills/mobile-design/ (project).

Q: Which AI agents can use mobile-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Q: Is mobile-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Q: Who maintains mobile-design?

It is published by aiskillstore in aiskillstore/marketplace. It has 62 recorded installs.

by aiskillstoreMobile

(Mobile-First · Touch-First · Platform-Respectful)

Installs: 62
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/aiskillstore/marketplace --skill mobile-design

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads mobile-design automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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
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

🚫 Touch & UX Sins

❌ Never	Why	✅ Always
Touch <44–48px	Miss taps	Min touch target
Gesture-only action	Excludes users	Button fallback
No loading state	Feels broken	Explicit feedback
No error recovery	Dead end	Retry + message
Ignore platform norms	Muscle memory broken	iOS ≠ Android

🚫 Security Sins

❌ Never	Why	✅ Always
Tokens in AsyncStorage	Easily stolen	SecureStore / Keychain
Hardcoded secrets	Reverse engineered	Env + secure storage
No SSL pinning	MITM risk	Cert pinning
Log sensitive data	PII leakage	Never log secrets

5. Platform Unification vs Divergence Matrix

UNIFY                          DIVERGE
──────────────────────────     ─────────────────────────
Business logic                Navigation behavior
Data models                    Gestures
API contracts                  Icons
Validation                     Typography
Error semantics                Pickers / dialogs

Platform Defaults

Element	iOS	Android
Font	SF Pro	Roboto
Min touch	44pt	48dp
Back	Edge swipe	System back
Sheets	Bottom sheet	Dialog / sheet
Icons	SF Symbols	Material Icons

6. Mobile UX Psychology (Non-Optional)

Fitts’ Law (Touch Reality)

Finger ≠ cursor
Accuracy is low
Reach matters more than precision

Rules:

Primary CTAs live in thumb zone
Destructive actions pushed away
No hover assumptions

7. Performance Doctrine

React Native (Required Pattern)

const Row = React.memo(({ item }) => (
  <View><Text>{item.title}</Text></View>
));

const renderItem = useCallback(
  ({ item }) => <Row item={item} />,
  []
);

<FlatList
  data={items}
  renderItem={renderItem}
  keyExtractor={(i) => i.id}
  getItemLayout={(_, i) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * i,
    index: i,
  })}
/>

Flutter (Required Pattern)

class Item extends StatelessWidget {
  const Item({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Static');
  }
}

const everywhere possible
Targeted rebuilds only

8. Mandatory Mobile Checkpoint

Before writing any code, you must complete this:

🧠 MOBILE CHECKPOINT

Platform:     ___________
Framework:    ___________
Files Read:   ___________

3 Principles I Will Apply:
1.
2.
3.

Anti-Patterns I Will Avoid:
1.
2.

❌ Cannot complete → go back and read.

9. Framework Decision Tree (Canonical)

Need OTA + web team → React Native + Expo
High-perf UI → Flutter
iOS only → SwiftUI
Android only → Compose

No debate without justification.

10. Release Readiness Checklist

Before Shipping

11. Related Skills

frontend-design – Visual systems & components
frontend-dev-guidelines – RN/TS architecture
backend-dev-guidelines – Mobile-safe APIs
error-tracking – Crash & performance telemetry

Final Law: Mobile users are distracted, interrupted, and impatient—often using one hand on a bad network with low battery. Design for that reality, or your app will fail quietly.

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

FAQ

What does the mobile-design skill do?

(Mobile-First · Touch-First · Platform-Respectful)

How do I install mobile-design?

Run npx skills add https://github.com/aiskillstore/marketplace --skill mobile-design in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/mobile-design/ (personal) or .claude/skills/mobile-design/ (project).

Which AI agents can use mobile-design?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is mobile-design safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains mobile-design?

It is published by aiskillstore in aiskillstore/marketplace. It has 62 recorded installs.

More from aiskillstore/marketplace

View all →

skill-creator

aiskillstore/marketplace

Create or update a Codex skill with appropriately scoped instructions and any needed supporting resources.

AI & Agents1.1K installs

frontend-design

aiskillstore/marketplace

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Frontend & Design255 installs

xlsx

aiskillstore/marketplace

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas

Data & Databases238 installs

webapp-testing

aiskillstore/marketplace

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Testing & QA234 installs

pptx

aiskillstore/marketplace

Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for: (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks

Docs & Writing230 installs

docx

aiskillstore/marketplace

Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks

Docs & Writing225 installs

Popular mobile skills

View category →

design-mobile-apps

designed-by-ai/skills

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.

Mobile1.1M installs

ios-design

uizze.sh

Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.

Mobile416.5K installs

vercel-react-native-skills

vercel-labs/agent-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

OfficialMobile256.7K installs

animate-expo

emilkowalski/skills

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

Mobile140.1K installs

xcode-project-setup

firebase/agent-skills

Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).

OfficialMobile131.2K installs

firebase-remote-config-basics

firebase/agent-skills

Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.

OfficialMobile121.7K installs

mobile-design

Install

Install

Describe the task

Review the result

SKILL.md

Mobile Design System

1. Mobile Feasibility & Risk Index (MFRI)

MFRI Dimensions (1–5)

Score Formula

Interpretation

2. Mandatory Thinking Before Any Work

⛔ STOP: Ask Before Assuming (Required)

3. Mandatory Reference Reading (Enforced)

Universal (Always Read First)

Platform-Specific (Conditional)

4. AI Mobile Anti-Patterns (Hard Bans)

🚫 Performance Sins (Non-Negotiable)

🚫 Touch & UX Sins

🚫 Security Sins

5. Platform Unification vs Divergence Matrix

Platform Defaults

6. Mobile UX Psychology (Non-Optional)

Fitts’ Law (Touch Reality)

7. Performance Doctrine

React Native (Required Pattern)

Flutter (Required Pattern)

8. Mandatory Mobile Checkpoint

9. Framework Decision Tree (Canonical)

10. Release Readiness Checklist

Before Shipping

11. Related Skills

When to Use

Limitations

FAQ

More from aiskillstore/marketplace

Popular mobile skills