| name | mobile-product-ux |
| description | Mobile product UX — sticky chrome, bottom bars, sheets, safe areas, gesture conflicts, one-thumb density. Use only when phone/tablet chrome is the focus (sticky misbehaving, sheet vs keyboard, adapting desktop product UI to mobile). Prefer product-design when multi-step product UX is unclear (it routes here). Prefer frontend-design for full FE feature builds. Not for marketing landings only, pure desktop dashboards, general polish (product-ui-craft), or browser proof loops (browser-verify / quality-check).
|
Mobile product UX
Job: Make product surfaces usable with a thumb without discarding desktop power.
Sources (attribution)
- Mobile platform practice (safe areas, bottom reachability, sheet patterns)
aligned with iOS HIG / Material guidance — summarized for agents.
- Production patterns from dense product apps: sticky filter docks, floating
action HUDs, grade/tool bars that must track matrix height, chat action bars.
- Gesture hygiene: don’t let swipe containers steal sliders/scroll.
Original synthesis for agent-skills; not a copy of a single upstream skill.
When to load
- Card detail sticky grade bars, mobile action rows
- Chat history/share density on small screens
- Trade floor floating HUD / Accept placement
- Filter docks, bottom sheets, share sheets
- “Works on desktop, broken on iPhone”
Design rules
1. Viewports are requirements
Always consider at least:
- ~390×844 (phone)
- Safe-area insets (
env(safe-area-inset-*))
- Landscape only if product cares
2. Chrome model
| Element | Guidance |
|---|
| Top sticky | Thin; must not eat content; respect notch |
| Bottom sticky / HUD | Clear primary action; pad for home indicator |
| Dual stickies | Content padding both ends; test scroll range |
| Sheets | Drag handle affordance; focus trap; dismiss ≠ error |
3. Touch
- Min ~44×44 px targets
- Separate destructive vs primary
- Avoid hover-only tooltips for critical info
- Haptics (if project has a shared helper) only for meaningful commits
4. Gesture conflicts
Before shipping swipeable panels:
5. Density on small screens
- Prefer numbers-first expandable rows over walls of labels
- Collapse secondary actions into menus / overflow
- One primary CTA visible without scroll when possible
- Don’t clone desktop multi-column toolbars — re-prioritize
6. Content visibility
- Sticky bars must remain stuck for the full scroll region they claim
- Keyboard open: composer/chat stays usable (visual viewport)
- Fixed footers never permanently hide the last list items
Implementation checklist
Verify (required for sticky/gesture work)
Route to browser-verify:
- Mobile project or 390-wide snapshot
- Scroll through full matrix/list with sticky claimed
- Open sheet + dismiss
- Primary CTA reachable with one thumb
Hand off
| Need | Next skill |
|---|
| Token/type system | design-system |
| General density polish | product-ui-craft |
| A11y focus in sheets | web-quality |
| Jank while scrolling | react-performance |
