skills.rest
dtsong
dtsongCOMMUNITY
Explore all skills by this author →
GitHub

Navigation Design

Design mobile navigation architecture with screen hierarchy, deep linking, and state preservation.

1|1|Updated Feb 21, 2026
Search Tags:#state management#routing#navigation#ux design#mobile app#deep linking
One-click install
npx skills add https://github.com/dtsong/claude-code-windows-setup --skill navigation-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Navigation Design
Source: https://github.com/dtsong/claude-code-windows-setup/tree/main/skills/council/pathfinder/navigation-design
Command: npx skills add https://github.com/dtsong/claude-code-windows-setup --skill navigation-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps design the navigation architecture for mobile applications, ensuring a smooth and intuitive user experience.

Core Features & Use Cases

  • Screen Hierarchy Mapping: Visually organize all screens and their relationships.
  • Deep Linking Strategy: Define how users can access specific screens via URLs.
  • State Preservation: Ensure user progress is maintained across app states.
  • Use Case: Design the navigation for a new e-commerce app feature, mapping out product listings, detail pages, checkout flow, and ensuring deep links work correctly for promotional campaigns.

Quick Start

Design the navigation architecture for a mobile feature, mapping screen hierarchy, deep linking, and state preservation.

Frequently Asked Questions about Navigation Design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design mobile navigation architecture for a new app feature?▼

Designing mobile navigation architecture involves mapping screen hierarchy, defining deep linking strategies, and planning state preservation. This ensures a seamless user experience by managing routing, back button logic, and transition animations.

What is the best way to implement deep linking in a mobile app?▼

Implementing deep linking requires defining how users access specific screens via URLs. A solid deep linking strategy ensures promotional campaigns and external links route users directly to the correct mobile app views while maintaining state preservation.

How do I preserve user state across mobile app navigation flows?▼

Preserving user state across mobile app navigation flows ensures user progress is maintained across different app states. This involves managing routing logic and back button behaviors to prevent data loss during screen transitions.

Does this navigation design approach work with React Navigation and Flutter?▼

Yes, this navigation design approach addresses cross-platform development using frameworks like React Navigation and Flutter. It manages routing, back button logic, and transition animations to deliver a seamless cross-platform user experience.

How do I map screen hierarchy for a mobile e-commerce checkout flow?▼

Mapping screen hierarchy for a mobile checkout flow involves visually organizing screens and their relationships. This includes structuring product listings, detail pages, and checkout transitions to ensure an intuitive e-commerce user journey.

Related Skills

Explore More Design & Creative Skills→
LerianStudioLerianStudio
205

pre-dev-prd-creation

Generate a complete PRD with problem discovery, user stories, and success metrics.

Official
Basic
robotostudiorobotostudio
172

vercel-react-view-transitions

Implement UI state transitions in React apps using the View Transition API with Next.js routing support.

Official
Advanced
JubaKitiashviliJubaKitiashvili
41

erne-navigate

Map app screens into an Expo Router navigation architecture.

Community
Advanced
aaronbassettaaronbassett
4

flutter-core:flutter-navigation-routing

Configure GoRouter-based declarative routing with deep linking and route guards in Flutter.

Community
Advanced