mobile-design_skill

Overview

This skill teaches a mobile-first, touch-first doctrine for designing and engineering iOS and Android apps. It focuses on constraints, performance, accessibility, and offline behavior rather than fixed layouts, and applies to native, React Native, and Flutter projects. Use it to avoid desktop-thinking and to make pragmatic mobile trade-offs early in the project.

How this skill works

The skill provides a Mobile Feasibility & Risk Index (MFRI) to score features by platform clarity, interaction complexity, performance risk, offline dependence, and accessibility. It enforces a reading and checkpoint workflow that requires platform- and framework-specific guidance before any UI design or code. It also lists hard bans (anti-patterns), platform divergence rules, performance patterns, and a release readiness checklist.

When to use it

• At project kickoff to decide framework and platform constraints
• Before designing or implementing any mobile screen or feature
• When evaluating performance, offline behavior, or accessibility risks
• During code reviews to catch mobile-specific anti-patterns
• Before release to confirm readiness on low-end devices and networks

Best practices

• Run the MFRI for every non-trivial feature and act on the score
• Always declare Platform, Framework, Navigation, Offline, and Target Devices before design
• Optimize lists and animations: use native drivers, virtualization, and memoization
• Respect platform norms (fonts, back behaviors, sheet patterns) where it impacts muscle memory
• Treat touch, battery, and intermittent networks as primary constraints
• Enforce the mandatory mobile checkpoint and required reading files

Example use cases

• Choosing between React Native and Flutter for a cross-platform app while weighing OTA needs
• Redesigning a media-heavy feed to avoid JS-thread jank and memory bloat
• Auditing an onboarding flow for touch targets, offline fallback, and accessibility
• Defining a release checklist to ensure MFRI ≥ 3 and tests on low-end devices
• Creating a list component using FlatList/FlashList patterns with stable keys and getItemLayout