navigation-designlisted

Use when designing navigation architecture for mobile or cross-platform features including screen hierarchy, deep linking schemes, and state preservation strategies. Covers stack navigation, modal flows, universal links, and process death recovery. Do not use for platform guideline compliance (use platform-audit) or hardware API integration (use device-integration).
dtsong/my-claude-setup · ★ 5 · AI & Automation · score 76

Install: claude install-skill dtsong/my-claude-setup

# Navigation Design ## Purpose Design the navigation architecture for a mobile or cross-platform feature, including screen hierarchy, deep linking scheme, state preservation strategy, and transition animations. ## Scope Constraints Reads feature requirements, user flows, and existing navigation code for architectural analysis. Does not modify files or execute code. Does not interact with app runtimes or navigation frameworks directly. ## Inputs - Feature requirements and user flows - Target platforms and framework (React Navigation, Flutter Navigator, SwiftUI NavigationStack) - Existing navigation structure (if extending) - Deep linking requirements (universal links, custom schemes) ## Input Sanitization No user-provided values are used in commands or file paths. All inputs are treated as read-only analysis targets. ## Procedure ### Progress Checklist - [ ] Step 1: Map the screen hierarchy - [ ] Step 2: Define navigation patterns - [ ] Step 3: Design deep linking scheme - [ ] Step 4: State preservation strategy - [ ] Step 5: Transition design - [ ] Step 6: Edge case handling ### Step 1: Map the Screen Hierarchy Identify all screens the feature requires. Organize into a hierarchy: - **Root screens** (accessible from tab bar or drawer) - **Stack screens** (pushed onto a navigation stack from a root) - **Modal screens** (presented modally — confirmation dialogs, full-screen overlays) - **Nested stacks** (sub-flows that have their own back history) ### Step 2: Define