mobile-design

Guide mobile app design decisions across iOS, Android, and cross-platform frameworks.

Updated Aug 5, 2025
One-click install
npx skills add https://github.com/DishaAnand/FocusNest --skill mobile-design-dishaanand
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/DishaAnand/FocusNest/tree/main/.agents/skills/mobile-design
Command: npx skills add https://github.com/DishaAnand/FocusNest --skill mobile-design-dishaanand

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mobile apps often ship with desktop-oriented design patterns that harm touch usability and performance. This Skill provides a structured mobile-first doctrine to prioritize thumb reach, battery efficiency, offline resilience, and platform-specific conventions.

Core Features & Use Cases

  • Design philosophy: Mobile-first, touch-first, platform-respecting constraints.
  • Guidelines: Feasibility checks, anti-pattern lists, and platform defaults for iOS and Android.
  • Use Case: Teams building React Native, Flutter, or native apps can align on consistent UX and architecture decisions.

Quick Start

  • Use the mobile-design skill to draft a screen spec that follows thumb-zone guidelines, dark mode awareness, and performance targets.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I apply mobile-first design principles to prevent desktop-thinking in iOS and Android apps?

Mobile-first design principles prioritize thumb reach, touch usability, and platform-specific conventions to prevent desktop-thinking in iOS and Android apps. This doctrine provides structured guidelines for feasibility checks, anti-patterns, and platform defaults to ensure optimal touch UX.

Does this mobile design doctrine work with cross-platform frameworks like React Native and Flutter?

Yes, this mobile design doctrine explicitly supports React Native and Flutter projects alongside native iOS and Android development. It guides consistent UX, architecture decisions, and platform-respecting constraints across all these environments.

What are common mobile app anti-patterns that harm touch usability and performance?

Common mobile app anti-patterns include desktop-oriented design patterns that harm touch usability, battery efficiency, and offline resilience. This doctrine provides anti-pattern lists and feasibility checks to identify and prevent these performance and accessibility issues.

How do I design mobile app screens that follow thumb-zone guidelines and dark mode awareness?

To design mobile app screens following thumb-zone guidelines and dark mode awareness, apply this mobile-first doctrine to draft screen specs. It covers dynamic color, dark mode defaults, and performance targets for touch-first interactions.

What is mobile-first design and when do I need it for my app architecture?

Mobile-first design is a structured philosophy prioritizing touch-first interactions, battery efficiency, and offline resilience over desktop patterns. You need it when building native or cross-platform mobile apps to align teams on consistent UX and architecture decisions.

Are there specific platform defaults for iOS and Android that I should follow in mobile UX design?

Yes, there are specific platform defaults for iOS and Android that guide mobile UX design decisions. This doctrine outlines platform-specific conventions for touch UX, dynamic color, dark mode, and accessibility to ensure apps respect native expectations.