mobile-responsive-patterns

What problem does it solve?

This Skill addresses the complexities of designing and implementing user interfaces for mobile applications that must be intuitive, accessible, and consistent across a wide range of devices and platforms (iOS and Android).

Core Features & Use Cases

• Touch Target Sizing: Ensures interactive elements are large enough for easy tapping, adhering to WCAG and platform guidelines.
• Gesture Handling: Defines standard gestures (tap, swipe, pinch) and their expected behaviors and feedback.
• Safe Area Management: Accounts for device notches, dynamic islands, and home indicators to prevent content occlusion.
• Platform Conventions: Details differences and best practices for iOS (HIG) and Android (Material Design).
• Component Patterns: Provides guidance on bottom sheets, pull-to-refresh, haptic feedback, keyboard avoidance, and navigation patterns (tab bar vs. hamburger).
• Responsive Typography & Layouts: Ensures text scales correctly and layouts adapt to different screen sizes.
• Use Case: When designing a new feature for a mobile app, use this Skill to ensure all interactive elements are tappable, gestures are intuitive, and the UI respects platform-specific design languages and device hardware.

Quick Start

Apply mobile responsive patterns to ensure touch targets are at least 48x48dp and respect safe area insets.