mobile-touch-design
Skill4 starsChanged 3 months agoApache-2.0View on GitHub
Design principles for touch interfaces: thumb zones, touch target sizing, gesture patterns, responsive breakpoints, and mobile-first workflow. Covers iOS HIG and Material Design touch guidelines, Fitts's Law for thumbs, and the complete mobile design checklist. Use when designing or reviewing mobile interfaces, touch-first products, or responsive layouts. Triggers on: "mobile design", "touch targets", "thumb zone", "responsive design", "gesture design", "mobile-first", "iOS design", "Android design".
Files
Mobile Touch Design
Thumbs, not mice. Depth for targets, zones, and gestures lives in references/.
Defaults
- Primary targets ≥48×48; secondary ≥44×44; ≥8 spacing between controls
- Primary CTAs and nav in the easy thumb zone (lower third)
- Gestures always have a visible alternative
- Body text ≥16px; correct input
types; no hover-only UX
Breakpoints (starter)
| Breakpoint | Width |
| Mobile | <640px |
| Tablet | 640–1024px |
| Desktop | 1024–1440px |
| Wide | >1440px |
Mobile-first: design small first; add with min-width. Test on devices, not only emulators.
Checklist
- Primary targets ≥48dp; 8dp+ gaps
- CTAs in bottom ⅔ when one-handed
- Body ≥16px; inputs don't trigger iOS zoom
- Keyboard doesn't cover focused fields
- Contrast usable outdoors (≥4.5:1 text)
- Visible
:active/ pressed states - Gestures have cues + alternatives
- Destructive actions harder to reach + confirmed
- No hover-only functionality
Reference Map
references/touch-targets.md— HIG / Material / WCAG sizesreferences/thumb-zones.md— reach map and placementreferences/gestures.md— gesture table and anti-patterns
Related Skills
- For visual fundamentals → use
ui-visual-design - For interaction patterns → use
interaction-design-patterns - For iOS vs Material → use
cross-platform-design - For accessibility → use
a11y-accessibility-design - For forms on mobile → use
form-ux
In this repository80 other files it gives its agents.
- a11y-accessibility-designSkill
- agentic-ui-patternsSkill
- ai-native-ui-designSkill
- ai-ui-anti-patternsSkill
- ai-ui-heuristicsSkill
- calm-technology-uiSkill
- conversion-growth-designSkill
- cross-platform-designSkill
- dark-mode-designSkill
- data-visualizationSkill
- design-systemsSkill
- design-thinking-processSkill
- error-empty-statesSkill
- ethical-design-patternsSkill
- form-uxSkill
- information-architectureSkill
- interaction-design-patternsSkill
- internationalization-uiSkill
- modal-classes-lifecycleSkill
- modal-container-imagesSkill
- modal-dicts-queuesSkill
- modal-endpointsSkill
- modal-fundamentalsSkill
- modal-gpu-computeSkill
- modal-networkingSkill
- modal-observabilitySkill
- modal-parallel-executionSkill
- modal-sandboxesSkill
- modal-scaling-performanceSkill
- modal-schedulingSkill
- modal-secretsSkill
- modal-serversSkill
- modal-storageSkill
- modal-web-servingSkill
- modal-workspace-adminSkill
- motion-design-principlesSkill
- notifications-permissionsSkill
- onboarding-uxSkill
- rust-api-designSkill
- rust-async-programmingSkill
- rust-cargo-masterySkill
- rust-cli-applicationsSkill
- rust-clippy-lintsSkill
- rust-closures-iteratorsSkill
- rust-compiler-internalsSkill
- rust-concurrencySkill
- rust-design-patternsSkill
- rust-editionsSkill
- rust-embeddedSkill
- rust-error-handlingSkill
- rust-game-developmentSkill
- rust-lifetimes-borrowingSkill
- rust-macrosSkill
- rust-performanceSkill
- rust-rustdocSkill
- rust-rustup-toolchainSkill
- rust-smart-pointersSkill
- rust-testing-benchmarkingSkill
- rust-type-systemSkill
- rust-unsafe-ffiSkill
- The first 60 shown.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.