skills.rest
wildbitca
wildbitcaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

common-mobile-ux-core

Enforce touch-first UX rules across iOS, Android, Flutter, and React Native.

1|Updated Mar 19, 2026
Search Tags:#typography#mobile#ux#responsive-design#safe-area#touch-targets#haptics
One-click install
npx skills add https://github.com/wildbitca/ai-resources --skill common-mobile-ux-core
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: common-mobile-ux-core
Source: https://github.com/wildbitca/ai-resources/tree/main/skills/common-mobile-ux-core
Command: npx skills add https://github.com/wildbitca/ai-resources --skill common-mobile-ux-core

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Universal mobile UX principles for touch-first interfaces. Enforces touch targets, safe areas, and mobile-specific interaction patterns.

Core Features & Use Cases

  • Touch Targets: min 44x44pt on iOS and 48x48dp on Android; use SafeArea/WindowInsets; avoid notches.
  • Safe Areas: Ensure content respects safe areas and insets.
  • Interactions: Use active states (no hover) and optional haptic feedback for taps.
  • Typography & Inputs: Define base font sizes and input behaviors across platforms.
  • Use Case: Align mobile UX across iOS, Android, Flutter, and React Native apps for consistency.

Quick Start

Apply the Mobile UX Core guidelines to your app to ensure touch targets meet minimum sizes and SafeArea usage.

Frequently Asked Questions about common-mobile-ux-core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the minimum mobile UX touch target sizes for iOS and Android?▼

Minimum mobile UX touch targets are 44x44pt on iOS and 48x48dp on Android. Enforcing these dimensions prevents mis-taps and ensures your interface meets universal touch-first interaction guidelines across both platforms.

How do I manage safe areas and screen insets in React Native and Flutter?▼

Manage safe areas by applying SafeArea or WindowInsets to respect screen boundaries. This prevents content from clipping into notches or home indicators, maintaining proper spacing across iOS, Android, Flutter, and React Native views.

Should mobile UX designs use hover states or active states for touch interactions?▼

Mobile UX designs should use active states instead of hover states. Touch-first interfaces lack a persistent cursor, so active states provide necessary visual feedback during taps, optionally enhanced with haptic cues.

Can I use universal mobile UX rules to align typography and inputs across multiple platforms?▼

You can align typography and inputs across platforms by applying universal mobile UX rules. This enforces consistent base font sizes and standardizes keyboard handling behaviors across iOS, Android, Flutter, and React Native applications.

Why do my mobile buttons overlap the notch or get clipped on different devices?▼

Buttons overlap notches when safe areas are ignored. You must enforce proper SafeArea or WindowInsets usage in your mobile views to ensure content respects physical screen boundaries and system insets on various devices.

Do I need platform-specific guidelines to implement consistent mobile UX across iOS and Android?▼

You do not need separate guidelines if you apply universal touch-first UX rules. A unified core standardizes touch targets, active states, and typography, satisfying platform-specific requirements for both iOS and Android simultaneously.

Related Skills

Explore More Design & Creative Skills→
TimeKastTimeKast

mobile-design

Guide mobile-first design for iOS and Android apps with platform conventions.

Official
Intermediate
NymfariousNymfarious
1

optimizing-mobile-experience

Optimize StickerNest for mobile touch interactions and responsive layouts.

Community
Advanced
FutureAtomsFutureAtoms
1

react-native-2026-accessibility

Implement and test React Native accessibility with WCAG 2.2 compliance.

Community
Advanced
faw01faw01
18

building-native-ui

Implement native-feeling mobile UI with Expo Router and platform-specific components.

Community
Intermediate