skills.rest
Emasoft
EmasoftCOMMUNITY
Explore all skills by this author →
Website𝕏@fmuaddibGitHub

amw-mobile-design

Provides iOS HIG and Android Material 3 platform conventions, touch-target ergonomics, and per-industry mobile design guidance.

Updated Jul 8, 2026
Search Tags:#mobile design#react native#ux#thumb zone#touch targets#material 3#ios hig
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-mobile-design-emasoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amw-mobile-design
Source: https://github.com/Emasoft/ai-maestro-webdesign/tree/main/skills/amw-mobile-design
Command: npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-mobile-design-emasoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Designing native-feeling mobile apps requires knowing platform-specific conventions (iOS HIG vs Android Material 3), touch-target ergonomics, and thumb-zone reachability rules that generic responsive web design guidance does not cover. ## Core Features & Use Cases - Platform-difference matrix: Compares navigation, typography, components, gestures, and dialogs between iOS HIG and Android Material 3, with React Native cross-platform notes. - Touch-target ergonomics: Codifies the 44pt/48dp minimum sizes, hitSlop patterns, 8dp spacing rules, and thumb-zone placement with a common-mistake catalogue. - Per-industry design languages: Provides design signatures for fitness, finance, social, productivity, health, crypto, travel, education, and e-commerce apps, plus the Peak-End emotional design workflow. - Use Case: When asked to design a fitness app screen in React Native, apply the five-step process (context, structure, visual design, Peak-End emotion, polish) and verify every tap target meets the 44×44pt minimum. ## Quick Start Ask the AI to design a mobile app screen for a finance app following iOS HIG and Android Material 3 conventions with proper touch targets.

Frequently Asked Questions about amw-mobile-design

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

FAQPage Schema
How do I design a mobile app screen that follows iOS and Android conventions?▼

Follow the five-step process: understand context, structure the UX flow, apply visual design rules (8-point grid, 60/30/10 colour), design for the Peak-End emotional moments, then polish. Consult the platform-difference reference for navigation, typography, and component conventions per platform.

What is the minimum touch target size for iOS and Android?▼

iOS requires 44 × 44 pt minimum per the Apple HIG; Android requires 48 × 48 dp per Material guidelines. Adjacent targets also need at least 8 dp/pt of clear spacing between hit areas to prevent mis-taps.

How do I make a small icon button tappable in React Native?▼

Use the hitSlop prop on Pressable to expand the interactive region to 44 × 44 pt around a smaller visual element. For example, a 16 × 16 close icon needs hitSlop of 14 on each side so the total hit area reaches the minimum.

Does this skill cover responsive web design for small screens?▼

No. Generic responsive web design and small-screen web pages are handled by the amw-design-principles orchestrator. This skill activates only for native mobile app design on iOS, Android, React Native, Flutter, SwiftUI, or Jetpack Compose.

Where should primary call-to-action buttons be placed on mobile?▼

Place primary CTAs in the bottom third of the screen, which is the natural thumb zone for one-handed use. Bottom-centre placement works for both right- and left-handed users; top-right placement is unreachable one-handed on large phones.

Related Skills

Explore More Design & Creative Skills→
intelligentcode-aiintelligentcode-ai
35

web-designer

Design user interfaces and design systems for web and mobile experiences.

Official
Basic
kinncjkinncj
23

mockup

Generates runnable UI mockups from approved wireframes using declared stacks.

Community
Advanced
getcrew44getcrew44
358

visual-system-review

Evaluate UI screens for visual consistency, hierarchy, and design-system token adherence.

Official
Basic
OmarMiraOmarMira

mobile-design

Guide mobile-first design for iOS and Android applications.

Community
Advanced