# 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.

- Skill: `hoangnguyen0403/common-mobile-ux-core` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add hoangnguyen0403/common-mobile-ux-core`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangnguyen0403/common-mobile-ux-core/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: HoangNguyen0403 (https://skillmd.com/u/hoangnguyen0403)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/hoangnguyen0403/common-mobile-ux-core

---


# 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