mobile-design

Guides iOS and Android app design decisions for React Native and Flutter development.

Updated Aug 22, 2025
One-click install
npx skills add https://github.com/AnthonyCongHieu/voice_tool --skill mobile-design-anthonyconghieu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/AnthonyCongHieu/voice_tool/tree/main/voice_tools_v1/.agent/skills/mobile-design
Command: npx skills add https://github.com/AnthonyCongHieu/voice_tool --skill mobile-design-anthonyconghieu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mobile teams often struggle to reconcile platform-specific patterns with a single design language, leading to inconsistent UX and wasted iterations. This skill provides a structured framework to think in mobile terms, bridging iOS and Android decisions.

Core Features & Use Cases

  • Platform-aware design thinking for iOS, Android, and cross-platform stacks (React Native, Flutter)
  • Decision trees, platform conventions, anti-patterns, and best practices
  • Guidance from lightweight heuristics to comprehensive pre-development checklists
  • Real-world use: shape navigation, typography, color system, performance, offline strategy

Quick Start

Use the audit workflow to kick off a platform-aware mobile design sprint.

Frequently Asked Questions about mobile-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a consistent UX for both iOS and Android using React Native or Flutter?

A platform-aware mobile design framework bridges iOS and Android UX differences by applying decision trees and best practices to reconcile platform-specific navigation patterns with a unified cross-platform design language for React Native or Flutter.

What is platform-aware mobile design and when do I need it?

Platform-aware mobile design is a structured framework aligning app typography, color systems, and navigation with native iOS and Android conventions. You need it during early design phases to prevent inconsistent UX and wasted development iterations.

How do I start a mobile design sprint for a cross-platform app?

Start a mobile design sprint by running the audit workflow to evaluate early design phases. This applies decision trees and anti-pattern guidance to shape typography, color systems, and offline strategy for cross-platform iOS and Android apps.

Does this mobile design framework support both native and cross-platform development?

Yes, the mobile design framework supports native iOS and Android development alongside cross-platform stacks like React Native and Flutter. It guides platform conventions, performance considerations, and offline strategies across these environments.

What are common anti-patterns in mobile design for iOS and Android?

Common mobile design anti-patterns include ignoring platform-specific navigation conventions and mismanaging offline strategies. The framework provides explicit anti-pattern guidance and best practices to avoid these pitfalls and ensure consistent cross-platform UX.

Why does my cross-platform app UX feel inconsistent between platforms?

Cross-platform app UX feels inconsistent when a single design language ignores native iOS and Android platform patterns. Applying a platform-aware design framework with decision trees reconciles these differences and aligns navigation and typography conventions.