mobile-thumb-ergonomics-skilllisted

Styling-agnostic mobile viewport physics, handheld thumb-zone geometry, and layout architecture for single-handed smartphone web and PWA applications: bottom-anchored actions, bottom sheet drawers, 44px touch targets, 100dvh safe-area clearance, virtual keypad drawers, and horizontal swipe carousels decoupled from visual design themes.
4ntiDandruff/zero-bloat-skills · ★ 1 · Web & Frontend · score 74

Install: claude install-skill 4ntiDandruff/zero-bloat-skills

# Universal Mobile Thumb Ergonomics Skill (Handheld Viewport Architecture) Architecture, physical layout formulas, and layout engineering patterns for building thumb-friendly mobile web applications and PWAs across any domain. > **Separation of Concerns (Pemisahan Peran Arsitektur)**: > - **Skill Ini (`mobile-thumb-ergonomics-skill`)**: Bertindak sebagai **Rangka & Geometri (Skeleton & Muscle)**: Mengatur fisika viewport ponsel (`100dvh`), zona jangkauan jempol, clearance dock (`pb-32`), safe-area hardware, target sentuh 44px, drawer bottom sheet, dan pencegahan bug browser mobile. > - **Skill Desain Visual (`taste-skill`, `liquid-apple-ui-skill`, `minimalist-ui`, `brutalist-skill`)**: Bertindak sebagai **Kulit & Estetika (Visual Skin & Theme)**: Mengatur palet warna, tipografi, efek frosted glass, neumorphism, bayangan, dan micro-interaction. > > Skill ini **TIDAK MENDIKTE** gaya visual, warna brand, atau font tertentu. Seluruh pola disajikan dalam bentuk **Wireframe Struktural Netral (Styling-Agnostic)** yang dapat dipadukan dengan tema desain apa pun (Apple Glass, Dark Tech, Neumorphic, Minimalist, atau Brutalist). --- ## 1. Handheld Physics & The Natural Thumb Zone Modern smartphones feature elongated displays with aspect ratios of **19.5:9 and 20:9** (heights ranging between 780px and 932px on standard hardware). When a user holds a smartphone in one hand, their thumb pivots from the carpometacarpal joint at the bottom corner. Based on empirical mobile ergonomics