skills.rest
chriscarterux
chriscarteruxCOMMUNITY
Explore all skills by this author →
GitHub

mobile-design-patterns

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

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/chriscarterux/chris-claude-stack --skill mobile-design-patterns
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
UnicornUnicorn

ui-design-agent

Design UI patterns, components, and design systems for web and mobile applications.

Official
Advanced
ArnavPuriArnavPuri
3

mobile-ui-design

Generate mobile-first UI designs with CSS and HTML for iOS and Android.

Community
Intermediate
paulojalowyjpaulojalowyj
6

mobile-design

Guide mobile-first design with iOS and Android platform conventions.

Community
Advanced
bocanbocan
27

macos-design

Generate macOS design specifications for native-feeling apps across web, Electron, Tauri, and Swift.

Community
Intermediate