skills.rest
Mte90
Mte90COMMUNITY
Explore all skills by this author →
Website𝕏@mte90netGitHub

Mobile UX Core

Enforce mobile UX principles for touch-first interfaces and accessibility.

51|6|Updated Mar 28, 2019
Search Tags:#design#ui#accessibility#mobile#cross-platform#ux
One-click install
npx skills add https://github.com/Mte90/dotfiles --skill mobile-ux-core
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Mobile UX Core
Source: https://github.com/Mte90/dotfiles/tree/main/.config/opencode/skills/common/mobile-ux-core
Command: npx skills add https://github.com/Mte90/dotfiles --skill mobile-ux-core

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the common challenges in designing mobile user experiences by enforcing universal principles for touch-first interfaces, ensuring consistency and usability across different devices.

Core Features & Use Cases

  • Touch Target Sizing: Ensures interactive elements are large enough for easy tapping (min 44x44pt/48x48dp).
  • Safe Area Compliance: Guides developers to correctly implement safe areas, avoiding notches and system UI overlaps.
  • Mobile Interaction Patterns: Enforces mobile-specific interaction design, like active states and appropriate haptic feedback.
  • Use Case: A developer can use this skill to quickly audit a new mobile screen design, ensuring all buttons and interactive elements meet the minimum touch target size and are correctly placed within safe areas.

Quick Start

Apply mobile UX core principles to the provided screen design mockups.

Frequently Asked Questions about Mobile UX Core

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

FAQPage Schema
What is the minimum touch target size for mobile UI elements?▼

The minimum touch target size for mobile UI elements is 44x44pt or 48x48dp. Enforcing this sizing ensures interactive elements are large enough for easy tapping, standardizing usability across cross-platform touch-first interfaces.

How do I implement safe areas to avoid system UI overlaps in mobile interfaces?▼

To implement safe areas correctly, apply mobile UX guidelines that prevent notches and system UI overlaps. This ensures interactive elements and content remain properly placed within designated safe zones across different devices.

How do I audit a mobile screen design for accessibility and interaction patterns?▼

Audit a mobile screen design by checking adherence to mobile UX principles, verifying touch target sizing, safe area compliance, and mobile-specific interaction patterns like active states and haptic feedback for seamless cross-platform accessibility.

Does this mobile UX approach work for cross-platform applications?▼

Yes, this mobile UX approach works for cross-platform applications by enforcing universal design principles. It standardizes touch targets, safe areas, and interaction patterns, ensuring platform conventions and accessibility guidelines are met seamlessly across devices.

What mobile-specific interaction patterns should I include for touch-first interfaces?▼

Mobile-specific interaction patterns for touch-first interfaces include active states and appropriate haptic feedback. Enforcing these patterns standardizes interaction design, providing a seamless and accessible user experience across cross-platform applications.

Related Skills

Explore More Design & Creative Skills→
camilooscargbaptistacamilooscargbaptista
7

ux-review

Evaluate UI mockups for usability, accessibility, and interaction issues, producing prioritized recommendations.

Community
Intermediate
ic-facetic-facet

react-native

Develop React Native mobile apps with Expo, TypeScript, and NativeWind.

Official
Intermediate
MayaDispelerMayaDispeler
3

design-system-implementation

Select and integrate UI component libraries with design token and accessibility standards.

Community
Advanced
HakiickHakiick

mobile-dev

Develop mobile-first web interfaces with responsive CSS and touch interactions.

Community
Advanced