New to Claude Skills? Learn how to install them →

android on GitHub

Jetpack Navigation 3

Free

Effortlessly migrate and implement navigation in Android apps.

Get this skill

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 source

1. Install with the skills CLI

npx skills add android/skills/navigation-3 --agent claude-code

2. 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 android

Migration 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

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

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

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

Architecture

Working with ViewModel

Passing navigation arguments

  • Basic ViewModel : Navigation arguments are passed to a ViewModel constructed using viewModel()

Returning results

Frequently asked questions about Jetpack Navigation 3

Similar skills