skills.rest
leobbaroni
leobbaroniCOMMUNITY
Explore all skills by this author →
GitHub

mobile-principles

Applies mobile UX rules for touch targets, thumb zones, safe areas, gestures, and performance budgets.

1|Updated Jul 19, 2026
Search Tags:#accessibility#swiftui#jetpack compose#gestures#mobile ux#touch targets#safe area
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill mobile-principles-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-principles
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/genjutsu/_jutsu/mobile-principles
Command: npx skills add https://github.com/leobbaroni/maestro --skill mobile-principles-leobbaroni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Mobile interfaces frequently ship with mistappable buttons, hover-only interactions, content hidden under notches and home indicators, and janky animations because desktop-first assumptions leak into touch platforms. This Skill encodes the cross-platform rules (iOS, Android, mobile web) that prevent those failures. ## Core Features & Use Cases - Touch target and no-hover enforcement: Platform minimums (44pt iOS, 48dp Android, 44px web) with code patterns that gate hover styles behind @media (hover: hover) so actions stay visible on touch devices. - Layout guidance: Thumb-zone placement rules (primary CTA in the bottom third), safe-area inset handling via env(), safeAreaInset, and WindowInsets, plus the five canonical gestures users already know. - Reduced motion and performance budgets: Unified reduced-motion detection across CSS, SwiftUI, UIKit, and Compose, plus cold-start, frame-budget, binary-size, battery, and network constraints. - Use Case: While building a React Native or Compose checkout screen, ask the agent to verify the Pay button placement, hit areas, and safe-area padding; it applies the thumb-zone and 48dp rules and flags anti-patterns with corrected code. ## Quick Start Review this mobile screen implementation for touch target sizes, safe area handling, and hover-only interactions, then fix any violations.

Frequently Asked Questions about mobile-principles

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

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

Minimum touch target sizes are 44pt on iOS (Apple HIG), 48dp on Android (Material Design), and 44px on mobile web (WCAG 2.5.5), each with 8 units of spacing. The hit area can extend beyond the visible icon using padding or hitSlop.

How do I handle hover states on touch devices in CSS?▼

Gate hover styles behind `@media (hover: hover) and (pointer: fine)` so they apply only on devices with a precise pointer. Make all actions visible by default, treating hover as a desktop enhancement rather than a load-bearing interaction.

How do I detect reduced motion on Android Compose?▼

Use `ValueAnimator.areAnimatorsEnabled()` on API 26+, which returns false when the animator duration scale is zero. For older versions, read `Settings.Global.ANIMATOR_DURATION_SCALE` and check whether it equals 0f.

Does safe area handling differ between iOS and Android?▼

Yes. Web uses `env(safe-area-inset-*)` with `viewport-fit=cover`, SwiftUI uses `.safeAreaInset(edge:)`, and Compose uses `Modifier.windowInsetsPadding(WindowInsets.safeDrawing)`. Each respects notches, home indicators, and system bars on its platform.

Where should primary buttons be placed on phone screens?▼

Place primary CTAs in the bottom third of the screen, which falls within the natural thumb arc for one-handed use per Hoober's research. Reserve the top area for low-frequency actions like back, close, or search.

Related Skills

Explore More Design & Creative Skills→
Renzo-TognellaRenzo-Tognella

PerfectJob — Skill: UI/UX Design

Apply UI/UX design principles to cross-platform applications with user flows and wireframes.

Community
Advanced
skydovesskydoves
472

debugging-recompositions

Identify Jetpack Compose composable recompositions using Layout Inspector and @TraceReconciliation.

Community
Advanced
FutureAtomsFutureAtoms
1

typography-2026-font-accessibility

Implement WCAG-compliant typography with dyslexia-friendly fonts in React Native.

Community
Advanced
Yemomo511Yemomo511
2

expo-ui-swift-ui

Integrate native iOS SwiftUI views and modifiers into Expo apps.

Community
Basic