common-mobile-ux-core

name	common-mobile-ux-core
description	Enforce universal mobile UX principles for touch-first interfaces including touch targets, safe areas, and mobile-specific interaction patterns. Use when building mobile screens, handling touch interactions, or validating safe area compliance.
metadata	{"triggers":{"files":["**/*_page.dart","**/*_screen.dart","**/*_view.dart","**/*.swift","**/*Activity.kt","**/*Screen.tsx"],"keywords":["mobile","responsive","SafeArea","touch","gesture","viewport"]}}

Mobile UX Core

Priority: P0 (CRITICAL)

Guidelines

• Touch Targets: Min 44x44pt (iOS) / 48x48dp (Android). Add padding if needed.
• Safe Areas: Wrap content in SafeArea/WindowInsets. Avoid notches.
• Interactions: Use active states (no hover). Haptic feedback (short).
• Typography: Min 16sp body. Line height 1.5x.
• Keyboards: Auto-scroll inputs. Set InputType (email/number) & Action.

Code Examples

• Correct: IconButton(icon: Icon(Icons.close), padding: EdgeInsets.all(12))
• Avoid: Icon(Icons.close, size: 16) (Touch target too small)

Review Workflow

1. Test the smallest interactive element against 44pt iOS / 48dp Android.
2. Test content, keyboard, and fixed actions with notch/home-indicator/window insets.
3. Check pressed, loading, error, and disabled states; do not port desktop hover behavior.
4. Verify platform conventions separately before calling the screen complete.

Anti-Patterns

• No Hover Effects: Mobile no cursor; use pressed/active states instead
• No Tiny Targets: All clickable elements must ≥44pt
• No Fixed Bottoms: Always account for Home Indicator and Keyboard safe areas
• No OS Mixing: Respect Material (Android) and Cupertino (iOS) conventions separately

Related Topics

mobile-accessibility | mobile-performance | flutter-design-system | react-native-dls