mobile-design

Mobile-first design thinking and decision-making for iOS and Android apps. Touch interaction, performance patterns, platform conventions. Teaches principles, not fixed values. Use when building React Native, Flutter, or native mobile apps.

30,224stars3,393forksUpdated 8/13/2026

Developer Tools #react-native #ios #mobile #flutter #ui-design #android

Security Assessment

Safe(95/100)

Security Score95/100

About mobile-design

mobile-design is a mobile-first design-thinking and decision-making skill for iOS and Android apps. Rather than shipping fixed values, it teaches principles and forces deliberate choices, explicitly guarding against AI defaulting to memorized patterns. Its stated philosophy is touch-first, battery-conscious, platform-respectful, and offline-capable, with the core reminder that mobile is not a small desktop.

The skill is organized as a library of reference documents the agent must read before working: an anti-memorization thinking guide, touch psychology (Fitts' Law, gestures, haptics, thumb zone), performance (60fps, memory, React Native/Flutter), mobile backend (push, offline sync), testing, debugging, navigation, typography, color systems, and platform-specific guides for iOS Human Interface Guidelines and Android Material Design 3. Decision trees help select frameworks (React Native/Expo vs Flutter vs native), state management, navigation patterns, and storage strategy. It also enforces a clarifying-questions discipline (platform, framework, navigation, state, offline needs, target devices) and catalogs mobile anti-patterns such as using ScrollView for long lists, inline renderItem functions, and disabling the native animation driver. A bundled Python script, mobile_audit.py, is provided as a runtime UX and touch audit run against a project path.

It targets mobile developers and designers building React Native, Flutter, or native apps who want architecture and UX guidance grounded in platform constraints. The included script is a read-only auditor scoped to a supplied project directory, and the skill's declared tools are Read, Glob, Grep, and Bash for that purpose.

FAQ

What frameworks does it cover?

React Native (including Expo), Flutter, and native iOS (SwiftUI/UIKit) and Android (Jetpack Compose), with decision trees to help choose between them.

Does it give me copy-paste values?

Intentionally not. It teaches principles and provides decision trees and thinking guides, and its priority file is explicitly designed to make the agent reason about constraints rather than reuse memorized defaults.

What does the mobile_audit.py script do?

It runs a mobile UX and touch audit against a project path (python scripts/mobile_audit.py <project_path>). The skill's allowed tools are Read, Glob, Grep, and Bash, consistent with a read-only analysis over your project files.

What clarifying questions will it ask?

It is instructed to ask about platform, framework, navigation pattern, state management, offline requirements, and target devices before assuming defaults.