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

hoangnguyen0403@hoangnguyen0403

GitHub

From plugin

agent-skills-standard

538200 skills1 MCP

Install

$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill common-mobile-ux-core --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/common-mobile-ux-core

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

common-mobile-ux-core.SKILL.md

name: common-mobile-ux-core
description: 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.
metadata:
  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)

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

Other skills on agent-skills-standard.

See all 200 skills in agent-skills-standard