skills.rest
alaminmain
alaminmainCOMMUNITY
Explore all skills by this author →
𝕏@alaminmainGitHub

mobile-design

Guide mobile UX decisions for iOS and Android apps.

Updated Dec 22, 2025
Search Tags:#UX#Flutter#iOS#React Native#Android#design-thinking#mobile-design
One-click install
npx skills add https://github.com/alaminmain/DoorAuthServer --skill mobile-design-alaminmain
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/alaminmain/DoorAuthServer/tree/main/.agent/skills/mobile-design
Command: npx skills add https://github.com/alaminmain/DoorAuthServer --skill mobile-design-alaminmain

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mobile teams struggle to align on effective mobile UX decisions that balance platform conventions, performance constraints, and accessibility. This Skill provides a structured, design-thinking approach to guide decisions for iOS, Android, and cross-platform frameworks like React Native and Flutter.

Core Features & Use Cases

  • Guided thinking: Provides a framework for platform-aware mobile UX decisions across iOS, Android, and cross-platform stacks.
  • Platform conventions: Covers iOS Human Interface Guidelines and Material Design 3 patterns to ensure a native feel.
  • Performance & accessibility: Emphasizes 60fps animations, ergonomic thumb-zone placement, and accessibility considerations.
  • Use Case: A design lead uses the decision matrices to choose between tab bar vs drawer and to select dark mode vs OLED-optimized palettes for a new app.

Quick Start

  1. Read quick-start materials: mobile-design-thinking.md and touch-psychology.md to ground your approach.
  2. Run through the platform and navigation guidance in mobile-navigation.md and mobile-performance.md to validate decisions.
  3. Apply the design commitment by documenting platform-specific choices in a living design guide.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I make mobile UX decisions that follow iOS and Android platform conventions?▼

To make mobile UX decisions following platform conventions, use a design-thinking framework that evaluates iOS Human Interface Guidelines and Material Design 3 patterns. This ensures native feel by translating guidelines into actionable prompts for your specific project context.

What is the best way to choose between a tab bar and a drawer for mobile navigation?▼

Choosing between a tab bar and a drawer relies on decision matrices that balance platform conventions, ergonomic thumb-zone placement, and performance constraints. Applying a structured mobile design-thinking approach validates which navigation pattern best fits your app context.

Can I apply mobile design thinking to both React Native and Flutter projects?▼

Yes, you can apply mobile design thinking to React Native and Flutter projects. The framework models platform-aware UX decisions and performance patterns, like 60fps animations, across cross-platform stacks to ensure consistent design quality regardless of the framework.

How do I document mobile UX choices for dark mode and OLED-optimized palettes?▼

Documenting mobile UX choices for dark mode and OLED-optimized palettes involves applying design decision frameworks to record platform-specific selections in a living design guide. This translates accessibility and performance guidelines into committed project documentation.

When do I need to consider accessibility and thumb-zone placement in mobile UI design?▼

You need to consider accessibility and thumb-zone placement in mobile UI design whenever shaping user interfaces. A design-first approach emphasizes ergonomic placement and accessibility constraints early, translating these requirements into actionable design steps for iOS and Android.

Related Skills

Explore More Design & Creative Skills→
roviczzzroviczzz
1

mobile-design

Assess mobile feature feasibility and risk before development.

Community
Advanced
cyhinversecyhinverse

mobile-design

Guide mobile design decisions for iOS, Android, React Native, and Flutter.

Community
Advanced
pluginagentmarketplacepluginagentmarketplace
1

mobile-development

Build mobile apps for iOS, Android, and web with React Native or Flutter.

Community
Intermediate
berkcangumusisikberkcangumusisik
11

react-native-component

Generates React Native components with platform-specific styles and accessibility.

Community
Intermediate