SkillPublic
common-mobile-ux-core
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.
Quality
86%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
Securityby
Passed
No findings from the security scan
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
- Test the smallest interactive element against 44pt iOS / 48dp Android.
- Test content, keyboard, and fixed actions with notch/home-indicator/window insets.
- Check pressed, loading, error, and disabled states; do not port desktop hover behavior.
- 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
- Repository
HoangNguyen0403/agent-skills-standard
- Revision
cd1e988
- Last updated
- First committed
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.