common-mobile-ux-core

$npx mdskill add HoangNguyen0403/agent-skills-standard/common-mobile-ux-core

- **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`.

SKILL.md

.github/skills/common-mobile-ux-coreView on GitHub ↗
---
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)

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

More from HoangNguyen0403/agent-skills-standard

SkillDescription
android-agp-upgradeUpgrade an Android project to Android Gradle Plugin (AGP) 9. Use when migrating to AGP 9, updating Gradle build files, migrating to built-in Kotlin, or adopting the new AGP DSL.
android-architectureApply Clean Architecture layering, modularization, and Unidirectional Data Flow in Android projects. Use when setting up project structure, placing code in layers, configuring feature/core modules, or implementing UDF patterns.
android-background-workImplement WorkManager and background processing correctly on Android. Use when creating Worker classes, scheduling tasks, choosing between WorkManager and Foreground Services, or setting up Hilt in workers.
android-composeBuild high-performance declarative UI with Jetpack Compose. Use when writing Composable functions, optimizing recomposition, hoisting state, or working with LazyColumn and side effects.
android-compose-migrationMigrate an Android XML View to Jetpack Compose following a structured 10-step workflow. Use when converting XML layouts to Compose, setting up Compose in an existing View-based project, or incrementally adopting Compose.
android-concurrencyWrite correct coroutine scopes, Flow collection, and dispatcher injection in Android. Use when writing suspend functions, choosing between StateFlow and SharedFlow, or injecting Dispatchers for testability.
android-deploymentConfigure release signing, R8 obfuscation, and App Bundle publishing for Android. Use when setting up signing configs, enabling minification, adding ProGuard keep rules, or preparing for Play Store submission.
android-design-systemEnforce Material Design 3 theming and design token usage in Jetpack Compose. Use when implementing M3 components, color schemes, typography, or design tokens.
android-diConfigure Hilt dependency injection with proper scoping, modules, and constructor injection in Android. Use when setting up Hilt DI, defining modules, or configuring component scoping.
android-edge-to-edgeMigrate a Jetpack Compose app to edge-to-edge display and fix system bar inset issues. Use when UI components are obscured by navigation/status bars, fixing IME insets, or enabling edge-to-edge for SDK 35+.