← Back to Mobile application starters · project planning pack
See how it helps
Mobile navigation design
Makes mobile journeys understandable through clear hierarchy, native back behavior and discoverable alternatives to gestures.
mobile-navigation-interaction
Agents using this skill
When is it useful?
Use when users lose orientation between tabs, screens and modal tasks.
What does it help you do?
- Chooses navigation patterns matching the task hierarchy.
- Defines system back, cancellation and history restoration.
- Provides visible gesture alternatives and immediate feedback.
Try asking this
Design a nested settings journey where Android back, iOS gestures and explicit cancel lead to predictable destinations. Open a nested edit sheet, make changes and cancel with each supported input. Specify whether edits are discarded or retained and preserve the expected parent screen.
Detailed documentation
Read the skill’s original instructions, examples and checks in their authored language.
Show less
Mobile Navigation & Interaction
Structure mobile navigation so users always know where they are, how to go back, and what every tap or gesture will do.
1. Navigation patterns and hierarchy
- Top-level destinations: use a bottom tab bar (3–5 destinations) for peer sections the user switches between frequently; preserve each tab's scroll position and navigation stack independently.
- Drill-down flows: use hierarchical stack navigation for detail views and sequential steps so the user can always retrace their path.
- Modals and bottom sheets: reserve modals and sheets for self-contained subtasks, pickers, filters or confirmations. Provide an explicit close/cancel button as well as swipe-to-dismiss, and warn before discarding unsaved edits.
- Deep links and notifications: define where a deep link or notification lands in the hierarchy and where the Back action takes the user afterward (never trap them on an orphan screen).
2. System back and predictable history
- Respect the iOS interactive edge-swipe back and the Android system back gesture/button on every screen.
- Never override system back behavior arbitrarily: closing an open sheet, dialog or search overlay comes first, then stepping back in the stack. After completing a checkout, auth flow or destructive action, clear transient steps from the back stack so pressing Back does not re-submit.
3. Gestures, discoverability and feedback
- Never hide the only way to perform an essential action behind an undiscoverable gesture (such as long-press, two-finger swipe or shake). Pair swipe actions (swipe-to-delete, swipe-to-archive) with a visible button, menu item or edit mode alternative.
- Give every interactive element immediate visual press feedback (
pressed/ ripple / highlight within 100 ms) and prevent accidental double taps while an action is in flight.
Before you finish
- Tab, stack and modal/sheet boundaries are clear and preserve user context.
- iOS edge-swipe, Android system back and deep-link back stacks behave predictably.
- Every gesture-driven action has a visible, accessible alternative and immediate press feedback.
Included files 1
SKILL.md