Mobile UX Core
npx machina-cli add skill hoangnguyen0403/agent-skills-standard/mobile-ux-core --openclawMobile UX Core
Priority: P0 (CRITICAL)
Universal UX principles for mobile applications.
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 Target
IconButton(icon: Icon(Icons.close), padding: EdgeInsets.all(12))
// ❌ Too Small
Icon(Icons.close, size: 16)
Anti-Patterns
- No Hover Effects: Mobile has no cursor. Use pressed states.
- No Tiny Targets: All clickable elements ≥44pt.
- No Fixed Bottom: Account for Home Indicator & Keyboard.
- No OS Mix: Use Material (Android) & Cupertino (iOS) conventions.
Related Topics
mobile-accessibility | mobile-performance | flutter-design-system | react-native-dls
Source
git clone https://github.com/hoangnguyen0403/agent-skills-standard/blob/develop/.github/skills/common/mobile-ux-core/SKILL.mdView on GitHub Overview
Mobile UX Core provides universal UX principles for touch-first mobile apps, emphasizing reliable touch targets, safe areas, and device-specific interaction patterns. It covers typography, input handling, and responsive layouts to prevent notch and keyboard conflicts while delivering a consistent iOS and Android experience.
How This Skill Works
It prescribes concrete rules such as minimum hit areas and SafeArea usage, and specifies mobile-friendly interactions, including active states and haptic feedback instead of hover. Developers apply these guidelines through practical examples and by avoiding anti-patterns like tiny targets or blocked content.
When to Use It
- When designing touch-based navigation and controls for a new mobile app
- When targeting both iOS and Android platforms with native-like behavior
- When creating forms and input fields that must not be obscured by the keyboard
- When ensuring content respects notches, home indicators, and safe areas
- When improving accessibility and consistency for mobile typography and interactions
Quick Start
- Step 1: Audit all touchable controls to ensure a minimum size of 44pt (iOS) / 48dp (Android) and add padding as needed
- Step 2: Wrap layouts in SafeArea or WindowInsets to avoid notches and home indicators; adjust fixed bottom elements if present
- Step 3: Update typography to at least 16sp body with 1.5x line height and configure inputs to auto-scroll with appropriate InputType and Action; add haptic feedback for taps
Best Practices
- Ensure touch targets meet the minimum size (44pt by 44pt on iOS or 48dp on Android) and add padding as needed
- Wrap content in SafeArea or WindowInsets to avoid notches and home indicators
- Use active or pressed states and provide haptic feedback; avoid hover interactions
- Set readable typography with a minimum 16sp body and line height of 1.5x
- Auto-scroll inputs, specify InputType and Submit Action to optimize keyboard usage
Example Use Cases
- A Flutter screen ensures IconButton padding to meet the 44/48pt target
- A mobile screen wrapped in SafeArea to prevent notch content from being obscured
- Buttons use active states and trigger haptic feedback instead of hover
- Typography configured with 16sp body text and 1.5x line height for readability
- Form fields automatically scroll into view on focus and specify InputType and Action for keyboards
