Skip to content
Development
Skill

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

Boost this skill
@hoangnguyen0403hoangnguyen0403@hoangnguyen0403
From plugin
agent-skills-standard
567200 skills21 agents21 commands1 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.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • 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

Related Topics

mobile-accessibility | mobile-performance | flutter-design-system | react-native-dls

Read more
Read it on GitHub ↗
Ships withagent-skills-standard

The portable SDLC standards layer for AI coding agents. Sync once, then work in your own runtime.

Get the whole plugin
Stats
TypeScriptAngularGoJavaKotlin
+7 tags
PHPGitHubAnthropicMCPiOSAndroidFlutter
567
Stars
164
Forks
Active
Maintenance
TypeScript
Language
MIT
License
2d ago
Last commit
8mo ago
Created

Repo: hoangnguyen0403/agent-skills-standard

In this plugin
200 skills21 agents21 commands1 MCP
See everything inside

Other skills on agent-skills-standard.

See all 200 skills in agent-skills-standard