home / skills / hoangnguyen0403 / agent-skills-standard / mobile-ux-core

mobile-ux-core skill

safe

This skill enforces mobile UX best practices for touch-first interfaces, ensuring accessible targets, safe areas, and responsive typography across platforms.

npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill mobile-ux-core

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.5 KB

---
name: Mobile UX Core
description: Universal mobile UX principles for touch-first interfaces. Enforces touch targets, safe areas, and mobile-specific interaction patterns.
metadata:
  labels: [mobile, ux, design, accessibility, cross-platform]
  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)**

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

```dart
// ✅ 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

Overview

This skill provides universal mobile UX principles for touch-first interfaces, prioritizing safety, accessibility, and predictable interaction patterns. It enforces touch target sizes, safe-area handling, mobile-specific input behaviors, and platform-consistent components. The goal is to reduce friction, prevent common anti-patterns, and improve usability across Android and iOS devices.

How this skill works

The skill inspects layout and interaction rules to ensure actionable elements meet minimum touch target sizes and that content respects device safe areas and insets. It checks interaction patterns like active/pressed states, keyboard handling, input types, and typography scale to align with mobile ergonomics and accessibility. It flags anti-patterns such as hover-only feedback, tiny targets, fixed-bottom overlays that conflict with system indicators or keyboards, and mixing OS-specific conventions.

When to use it

During UI code reviews for mobile apps (Flutter, React Native, native iOS/Android).
When designing or auditing touch interactions and accessibility compliance.
While implementing responsive layouts that must avoid notches and system insets.
When defining design system components for mobile platforms.
Before release to catch regressions related to keyboard, safe areas, or tap targets.

Best practices

Ensure interactive controls are at least 44x44pt (iOS) or 48x48dp (Android) including padding.
Wrap UI in SafeArea/WindowInsets and test on devices with notches and gesture bars.
Provide visible pressed/active states and optional short haptic feedback; avoid hover-only cues.
Set appropriate input types and IME actions; auto-scroll fields into view when keyboard appears.
Use minimum 16sp/pt body text with ~1.5x line-height for readability on small screens.
Follow platform conventions: Material for Android, Cupertino for iOS; avoid mixing OS metaphors.

Example use cases

Reviewing a Flutter screen to confirm IconButton padding and safe-area wrapping.
Auditing a React Native form to ensure inputs set keyboardType and auto-scroll correctly.
Updating a cross-platform component library to standardize touch target sizes and pressed states.
Checking a modal or bottom sheet for conflicts with the home indicator and on-screen keyboard.
Designing onboarding flows that use accessible typography and clear touch affordances.

FAQ

What touch target size should I use?

Use at least 44x44pt on iOS and 48x48dp on Android, counting padding around the visual element.

How do I handle notches and gesture bars?

Wrap top-level content in SafeArea or WindowInsets and test layouts on devices with cutouts and home indicators.