skills.rest
raccioly
racciolyCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design

Apply mobile design thinking to create thumb-friendly, platform-consistent UX.

Updated Mar 18, 2026
Search Tags:#design thinking#accessibility#mobile design#ux#platform patterns#thumb zone
One-click install
npx skills add https://github.com/raccioly/coach-gravity --skill mobile-design-raccioly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-design
Source: https://github.com/raccioly/coach-gravity/tree/main/content/starter-kit/skills/mobile-design
Command: npx skills add https://github.com/raccioly/coach-gravity --skill mobile-design-raccioly

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

## What problem does it solve? Mobile teams often struggle to translate broad UX principles into practical, thumb-friendly mobile interfaces that work across iOS, Android, and cross-platform stacks.

## Core Features & Use Cases

  • Thumb-zone aware design guidance for primary CTAs.
  • Platform-pattern oriented checklists (iOS, Android, cross-platform).
  • Decision trees and dynamic rules to reduce cognitive load and speed up design decisions.
  • Real-world example: Use this skill to craft a consistent, responsive mobile UI across both iOS and Android.

### Quick Start Describe a sample mobile screen and apply thumb-zone and platform pattern considerations to demonstrate the design thinking process.

Frequently Asked Questions about mobile-design

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

FAQPage Schema
How do I design mobile UX for thumb-friendly interfaces?▼

Thumb-friendly mobile UX design positions primary CTAs within accessible thumb zones and applies platform patterns to reduce cognitive load. Use decision trees and checklists to ensure primary actions are reachable during one-handed use.

What are platform-specific mobile design patterns for iOS and Android?▼

Platform-specific mobile design patterns provide distinct navigation, typography, and color system guidelines for iOS and Android. Applying these checklists ensures native consistency while maintaining a responsive UI across both platforms.

How do I reduce cognitive load in mobile app screen design?▼

Reduce cognitive load in mobile app screen design by applying dynamic rules and decision trees that streamline user choices. The skill provides process guidance to simplify navigation and speed up design decisions for iOS, Android, and cross-platform stacks.

Can I use mobile design thinking checklists for React Native and Flutter?▼

Yes, mobile design thinking checklists apply to React Native, Flutter, and native platforms. They cover cross-platform performance best practices, dark mode, and accessibility to craft consistent responsive UIs across different mobile stacks.

What is the best way to start planning a mobile UI screen?▼

The best way to start planning a mobile UI screen is to describe a sample screen and apply thumb-zone and platform pattern considerations. This demonstrates the design thinking process and establishes a consistent responsive layout early.

Why does my mobile UI feel inconsistent across iOS and Android?▼

Mobile UI feels inconsistent across iOS and Android when platform-specific patterns are ignored. Applying platform-oriented checklists for navigation, typography, and dark mode ensures responsive design decisions that align with native user expectations.

Related Skills

Explore More Design & Creative Skills→
tomada1114tomada1114
4

designing-wireframes

Design ASCII wireframes and UX flows from detailed requirements.

Community
Basic
pckienuitpckienuit

mobile-design

Analyze mobile app designs and code for platform-specific UX and implementation risks.

Community
Advanced
elophantoelophanto
116

ui-design

Create scalable UI design systems with tokens, components, and accessibility.

Community
Advanced
kaishinkaishin
10

adapt

Adapt design patterns across screen sizes, devices, and contexts.

Community
Advanced