mobile-design-patterns

Name: mobile-design-patterns
Availability: InStock
Author: chriscarterux

Provide platform-specific mobile design patterns for iOS, Android, and React Native.

Updated Aug 23, 2026

Ready to run

npx skills add https://github.com/chriscarterux/chris-claude-stack --skill mobile-design-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mobile-design-patterns
Source: https://github.com/chriscarterux/chris-claude-stack/tree/main/skills/mobile-design-patterns
Command: npx skills add https://github.com/chriscarterux/chris-claude-stack --skill mobile-design-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the guesswork and complexity of mobile app design by providing proven patterns, platform-specific guidelines, and performance optimizations that ensure your apps work beautifully on any device.

Core Features & Use Cases

Platform-Specific Patterns: iOS Human Interface Guidelines and Android Material Design patterns for native experiences
Gesture & Navigation Systems: Standard and custom gesture controls with optimal navigation flows
Performance Optimization: Mobile-first responsive design, lazy loading, and bundle optimization techniques
Use Case: Imagine you're building a food delivery app. Use this Skill to implement bottom tab navigation for main sections, optimize images for slow connections, and ensure touch targets are thumb-friendly for one-handed use.

Quick Start

Design a mobile login screen with proper touch targets and platform-specific styling for both iOS and Android.

Frequently Asked Questions about mobile-design-patterns

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

FAQPage Schema

How do I design mobile apps that work well on both iOS and Android?▼

Design mobile apps following platform-specific patterns: iOS Human Interface Guidelines for native iOS experiences and Android Material Design for Android. This ensures consistent, intuitive UX across platforms while respecting each platform's gesture controls, navigation paradigms, and user expectations.

What are mobile design patterns and why do they matter?▼

Mobile design patterns are proven UI and interaction solutions that solve common mobile UX problems like inconsistent navigation, poor touch targets, and performance issues. They ensure your app feels native, responsive, and optimized for thumb-friendly interactions on any device.

How do I optimize touch targets and navigation for mobile one-handed use?▼

Implement thumb-friendly touch targets meeting minimum size requirements, place primary actions within easy reach, use bottom tab navigation for main sections, and apply progressive disclosure to reduce cognitive load. These patterns ensure comfortable one-handed operation on mobile devices.

Can I apply mobile design patterns to React Native and mobile web apps?▼

Yes, mobile design patterns apply across iOS, Android, React Native, and mobile web. Use responsive design with breakpoints, lazy loading, and virtualization for performance. Platform guidelines translate to cross-platform frameworks while maintaining native-feeling experiences.

How do I handle mobile performance constraints like slow connections?▼

Apply mobile-first responsive design, optimize images for various network speeds, implement lazy loading for content, and use virtualization for large lists. These performance optimization techniques ensure fast load times and smooth interactions on constrained mobile networks.

What's the difference between responsive design and mobile-first design?▼

Mobile-first design starts with the mobile experience and scales up, ensuring optimal UX on small screens first. Responsive design adapts layouts across breakpoints. Mobile design patterns emphasize mobile-first approaches because mobile users face tighter performance and interaction constraints.