mobile-design

Guide iOS and Android mobile design decisions with context-based thinking.

1|Updated Dec 28, 2025
One-click install
npx skills add https://github.com/barbosakjn/finance-app --skill mobile-design-barbosakjn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/barbosakjn/finance-app/tree/main/.agent/workflows/.agent/skills/mobile-design
Command: npx skills add https://github.com/barbosakjn/finance-app --skill mobile-design-barbosakjn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Mobile Design Thinking provides a rigorous, context-aware framework for mobile projects, helping teams avoid rote patterns and reason about iOS/Android-specific constraints early in the lifecycle.

Core Features & Use Cases

  • Guidance on platform-specific patterns, decision trees, and anti-patterns to improve mobile UX.
  • Comprehensive checklists covering touch targets, navigation, performance, typography, color, accessibility, and back-handling to prevent design debt.
  • Examples and reference files to accelerate thinking before starting React Native, Flutter, or native development.

Quick Start

Read the design-thinking materials and adopt the anti-memorization protocol before coding any mobile feature.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I avoid rote pattern replication in mobile UX design for iOS and Android?

To avoid rote pattern replication in mobile UX design, adopt an anti-memorization protocol that forces context-aware reasoning about iOS and Android platform constraints before writing code. This process prevents design debt by evaluating touch targets, navigation, and accessibility early.

What is the best way to plan mobile design architecture before starting React Native or Flutter development?

The best way to plan mobile design architecture is using a rigorous design-thinking framework with comprehensive checklists for typography, color, and back-handling. This defines predevelopment processes to ensure platform-specific constraints are resolved before starting React Native or Flutter development.

Does this mobile design thinking framework apply to both native iOS and native Android projects?

Yes, this mobile design thinking framework applies to native iOS and native Android projects, as well as React Native and Flutter. It guides teams through platform decomposition to handle specific UX, design, and architecture decisions accurately across different environments.

How do we run accessibility checks for mobile interfaces during the early design phase?

To run accessibility checks for mobile interfaces during the design phase, use comprehensive checklists covering touch targets, color contrast, and typography. This framework integrates accessibility considerations directly into predevelopment reasoning to prevent compliance issues.

Why does copying web navigation patterns fail when building mobile apps?

Copying web navigation patterns fails in mobile apps because it ignores platform-specific constraints and context. Implementing an anti-memorization check ensures teams decompose iOS and Android navigation paradigms properly rather than replicating inappropriate layouts.