← ClaudeAtlas

mobile-principleslisted

Mobile-specific UX principles - touch targets, hover-less doctrine, thumb zones, safe areas, gestures, mobile perf budgets. Cross-platform (web mobile, iOS, Android).
AThevon/genjutsu · ★ 334 · Web & Frontend · score 79
Install: claude install-skill AThevon/genjutsu
> **Version-sensitive.** Every API name, SDK gate and browser-support claim below was > verified on **2026-09-08** against primary sources. What against, and when, is in > `_jutsu/VERSIONS.md`. If that date is old, re-verify before acting on a version number. # Mobile Principles > Touch-first UX context. Loaded when mobile is detected (web mobile, iOS, Android). > Concise rules here. Deep-dive in `references/`. --- ## Touch Targets | Platform | Recommended (design to this) | Hard floor | Spacing | Spec | |---|---|---|---|---| | Apple iOS / iPadOS | 44x44 pt | 28x28 pt | ~12 pt padding around bezeled controls, ~24 pt around unbezeled ones | Apple HIG, Accessibility > Mobility | | Apple watchOS | 44x44 pt | 28x28 pt | as above | Apple HIG | | Android | 48x48 dp | 48x48 dp | 8 dp between targets | Material Design 3 | | Web mobile | 44x44 CSS px | 24x24 CSS px | 24 px un-overlapped spacing satisfies the AA exception | WCAG 2.5.5 Target Size (Enhanced), **AAA** = 44x44; WCAG 2.5.8 Target Size (Minimum), **AA** = 24x24 | **Rule of thumb:** any tap target smaller than the platform minimum is a usability bug, period. The hit area can extend beyond the visible glyph (use padding, `hitSlop`, or a transparent inner spacer), but the *interactive* surface must reach the minimum. Spacing matters as much as size: two 44pt buttons touching edges are still mistappable. --- ## No-Hover Doctrine `:hover` does not exist on touch. Treating it as a primary trigger means hidden affordances