
Jetpack Navigation 3
FreeEffortlessly migrate and implement navigation in Android apps.
Free · Opens the source repo
What Jetpack Navigation 3 does
Jetpack Navigation 3 is a comprehensive skill designed for Android developers looking to streamline their app's navigation architecture. This skill provides detailed instructions for migrating from Navigation 2 to Navigation 3, ensuring that developers can update their applications seamlessly. The migration guide covers essential aspects such as dependency updates, route changes, state management, and UI component replacements, making it a critical resource for anyone maintaining or upgrading existing applications.
In addition to migration, this skill includes a wealth of recipes that illustrate common navigation patterns. Developers can learn how to implement deep links, manage multiple back stacks, and create adaptive layouts using Scenes. Each recipe is designed to provide practical examples, allowing developers to quickly integrate these features into their projects. Whether you need to handle conditional navigation flows or return results from various screens, the skill offers proven solutions that enhance user experience.
The documentation also emphasizes integration with modern Android architecture components, including Hilt and ViewModel. This ensures that navigation logic can be decoupled and managed effectively, promoting cleaner code and better maintainability. The skill is ideal for developers who want to leverage the latest advancements in Android navigation while adhering to best practices.
Overall, Jetpack Navigation 3 is an essential tool for Android developers aiming to improve their app's navigation capabilities and maintain a high standard of code quality. With its extensive resources and practical examples, this skill is a valuable addition to any developer's toolkit.
When to use it
Use this skill when upgrading existing Android applications to Jetpack Navigation 3 or when implementing navigation features in new projects.
When not to use it
This skill may not be suitable for developers working with non-Android platforms or those who do not require advanced navigation features.
What you can build with it
Migrating an Existing App
Use this skill to guide the migration of an existing Android app from Navigation 2 to Navigation 3, ensuring a smooth transition and updated features.
Implementing Deep Links
Refer to the deep link recipes to effectively integrate deep linking capabilities into your Android application, allowing for enhanced user navigation.
Creating Adaptive Layouts
Utilize the Scenes recipes to implement adaptive layouts such as dialogs and bottom sheets, improving the overall user interface of your app.
How to install Jetpack Navigation 3
View source1. Install with the skills CLI
npx skills add android/skills/navigation-3 --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by androidMigration guide
- Navigation 2 to Navigation 3 migration guide: Step-by-step guide to migrate an Android application from Navigation 2 to Navigation 3, covering dependency updates, route changes, state management, and UI component replacements.
Requirements
- Guide: Migrate to type-safe navigation in Compose : Step-by-step guide to migrating an Android application from string-based navigation to Type-Safe Navigation in Jetpack Compose using Jetpack Navigation 2.
Developer documentation
- Navigation 3. Search documentation for more information on basics, saving and managing navigation state, modularizing navigation code, creating custom layouts using Scenes, animating between destinations, or applying logic or wrappers to destinations.
Recipes
Code examples showcasing common patterns.
Basic API usage
- Basic: Shows most basic API usage.
- Saveable back stack: Shows basic API usage with a persistent back stack.
- Entry provider DSL: Shows basic API usage using the entryProvider DSL.
Common UI
- Common UI: Demonstrates how to implement a common navigation UI pattern with a bottom navigation bar and multiple back stacks, where each tab in the navigation bar has its own navigation history.
Deep links
- Static URI: Shows how to handle simple static URI deep links.
- URI with Arguments: Shows how to parse path and query arguments from a deep link.
- Synthetic BackStack: Shows how to handle deep links with a synthetic back stack.
- Custom Matcher: Shows how to implement custom deep link matching logic.
Scenes
Use built-in Scenes
- Dialog: Shows how to create a Dialog.
Create custom Scenes
- BottomSheet: Shows how to create a BottomSheet destination.
- List-Detail Scene: Demonstrates how to implement adaptive list-detail layouts using the Navigation 3 Scenes API.
- Two pane Scene: Demonstrates how to implement adaptive two-pane layouts using the Navigation 3 Scenes API.
Material Adaptive
- Material List-Detail: Demonstrates how to implement an adaptive list-detail layout using Material 3 Adaptive.
- Material Supporting Pane: Demonstrates how to implement an adaptive supporting pane layout using Material 3 Adaptive.
Animations
- Animations: Shows how to override the default animations for all destinations and a single destination.
- Conditional Transitions: Shows how to implement conditional transition animations.
Common back stack behavior
- Multiple back stacks: Shows how to create multiple top level routes, each with its own back stack. Top level routes are displayed in a navigation bar allowing users to switch between them. State is retained for each top level route, and the navigation state persists config changes and process death.
Conditional navigation
- Conditional navigation: Switch to a different navigation flow when a condition is met. For example, for authentication or first-time user onboarding.
Lifecycle
- Lifecycle Owner: Shows how to use and observe Lifecycle in Navigation 3.
Architecture
- Modularized navigation code (Hilt): Demonstrates how to decouple navigation code into separate modules using Hilt or Dagger for DI.
- Modularized navigation code (Koin): Demonstrates how to decouple navigation code into separate modules using Koin for DI.
Working with ViewModel
Passing navigation arguments
- Basic ViewModel : Navigation arguments are passed to a
ViewModelconstructed usingviewModel()
Returning results
- Returning Results as Events : Returning results as events to content in another
NavEntry - Returning Results as State : Returning results as state stored in a
CompositionLocal
Frequently asked questions about Jetpack Navigation 3
Similar skills
Android App Development
Comprehensive guide for Android and cross-platform app development.
Add App Clip to Expo App
Integrate lightweight iOS App Clips into your Expo project.
APK Reverse
Streamline your Android APK reverse engineering process.
Swift Expert
Master iOS/macOS development with Swift and SwiftUI.
React Native Expert
Build and optimize mobile apps with React Native and Expo.
Kotlin Specialist
Master idiomatic Kotlin with expert patterns and practices.
