Agent-skills-standard 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. (triggers: **/*_page.dart, **/*_screen.dart, **/*_view.dart, **/*.swift, **/*Activity.kt, **/*Screen.tsx, mobile, responsive, SafeArea, touch, gesture, viewport)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/common/common-mobile-ux-core" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-common-mobile-ux-core && rm -rf "$T"

manifest: skills/common/common-mobile-ux-core/SKILL.md

source content

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)

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