Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

navigation-3 — Claude Code skill: Jetpack Navigation 3 recipes

A reference skill for Jetpack Navigation 3: the move from Navigation 2 plus ready recipes for deep links, multiple back stacks, scenes, Hilt and ViewModel.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add android/skills --skill navigation-3 -a claude-code
Open on GitHub

What navigation-3 does

The skill gives your agent a set of guides and code recipes for Jetpack Navigation 3 in Android apps written in Kotlin and Compose. One walkthrough covers the move from Navigation 2: dependency updates, route changes, state handling, swapped UI components. A second guide stays on Navigation 2 and deals only with routes, showing how to get from strings to type-safe destinations.

Recipes are grouped by topic. The basics cover NavKey, NavDisplay and the entry provider DSL, including a saveable back stack. Deep links come in four shapes: plain static URI, path plus query arguments, a synthetic back stack, a custom matcher. Scenes handle dialogs, a bottom sheet, list-detail, two-pane and supporting pane layouts on Material 3 Adaptive. After that come animation overrides, conditional transitions, multiple back stacks behind a bottom bar, lifecycle observation, arguments passed into viewModel(), and results returned either as an event or as state.

Modular navigation appears twice, once for Hilt/Dagger and once for Koin. Watch where the migration guide starts: it takes an app already running Navigation 2, so with string routes the type-safe guide is the one to open first — otherwise you rework the steps yourself.

What it helps with

  • migrate an app from Navigation 2 to Navigation 3
  • replace string routes with type-safe destinations
  • build several back stacks behind a bottom bar
  • parse a deep link with path and query arguments
  • send a result back from one screen to another

Example prompts for the agent

  • Show me the deep link recipe with path and query arguments for Navigation 3
  • Open modular-hilt and split our navigation code with Hilt
  • Which recipe covers list-detail with Material 3 Adaptive?

How to install navigation-3

1Skills CLI (Vercel)

npx skills add android/skills --skill navigation-3 -a claude-code

2Manually: put the files in place

~/.claude/skills/navigation-3/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/navigation-3/

From the same set5

The whole set →

Similar

telegram-mini-app sickn33 Skill for developing Telegram Mini Apps—web applications that run inside Telegram with a native-like experience. Covers Telegram Web App API, TON ecosystem, user authentication, and monetization through Telegram Stars. Claude Code CX Codex Cursor +1 1,700installs mobile-app-ui-design ceorkm Provides mobile UX and UI guidelines for coding agents. Helps generate mobile screens, components, and design flows that follow structured layout rules. Claude Code CX Codex Cursor +1 11,500installs e2e tester-army Writes, runs, and debugs web and mobile end-to-end tests with the e2e test runner, combining agent goals with exact Playwright assertions and device checks. Claude Code CX Codex Cursor +1 1,200installs swift-expert https://github.com/Jeffallan A Swift skill that walks the agent through architecture, SwiftUI state, async/await and actors, with build checks in between. Built for iOS and macOS work. Claude Code CX Codex Cursor +1 4,100installs ios-application-dev MiniMax-OpenSource A reference skill for iOS interfaces: UIKit, SnapKit and SwiftUI, with checklists for layout, Dynamic Type, Dark Mode and accessibility. Claude Code CX Codex Cursor +1 2,100installs vercel-react-native-skills vercel A rules pack for React Native and Expo work: lists, animations, navigation, native modules. Load it so your agent makes mobile changes the same way every time. Claude Code CX Codex Cursor +1 253,900installs animate-expo emilkowalski Builds React Native and Expo animations using Reanimated and Gesture Handler. Helps keep motion on the UI thread and avoid dropped frames on physical devices. Claude Code CX Codex Cursor +1 135,900installs mobile-native emilkowalski Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug. Claude Code CX Codex Cursor +1 84,500installs

Questions about navigation-3

How do I install navigation-3 in Claude Code?

Run npx skills add android/skills --skill navigation-3 -a claude-code. The skill file lands at ~/.claude/skills/navigation-3/SKILL.md.

What does navigation-3 do?

It bundles guides and code examples for Jetpack Navigation 3: migration from Navigation 2, deep links, scenes, multiple back stacks, Hilt and ViewModel wiring.

Does it cover dependency injection other than Hilt?

Yes. Modular navigation comes in two recipes, one built on Hilt or Dagger and one on Koin.

Source text

SKILL.md · Apache-2.0
---
name: navigation-3
description: Learn how to install and migrate to Jetpack Navigation 3, and how to
  implement features and patterns such as deep links, multiple backstacks, scenes
  (dialogs, bottom sheets, list-detail, two-pane, supporting pane), conditional navigation
  (such as logged-in navigation versus anonymous), returning results from flows, integration
  with Hilt, ViewModel, Kotlin, and view interoperability.
license: Complete terms in LICENSE.txt
metadata:
  author: Google LLC
  last-updated: '2026-10-22'
  keywords:
  - recipe
  - Android
  - Navigation 2
  - Navigation 3
  - migration
  - Compose
  - guide
  - dependencies
  - NavKey
  - NavHost
  - NavDisplay
  - BottomSheet
  - list-detail
  - scenes
  - two-pane
  - supporting pane
  - multiple backstacks
  - dialog
  - Hilt
  - ViewModel
  - View interop.
---

*** ** * ** ***

## Migration guide

- *[Navigation 2 to Navigation 3 migration guide](references/android/guide/navigation/navigation-3/migration-guide.md)*: 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](references/android/guide/navigation/type-safe-destinations.md)* : 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](references/android/guide/navigation/navigation-3/index.md)*. 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](references/android/guide/navigation/navigation-3/recipes/basic.md)*: Shows most basic API usage.
- *[Saveable back stack](references/android/guide/navigation/navigation-3/recipes/basicsaveable.md)*: Shows basic API usage with a persistent back stack.
- *[Entry provider DSL](references/android/guide/navigation/navigation-3/recipes/basicdsl.md)*: Shows basic API usage using the entryProvider DSL.

### Common UI

- *[Common UI](references/android/guide/navigation/navigation-3/recipes/common-ui.md)*: 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](references/android/guide/navigation/navigation-3/recipes/deeplinks-staticuri.md)*: Shows how to handle simple static URI deep links.
- *[URI with Arguments](references/android/guide/navigation/navigation-3/recipes/deeplinks-uriarguments.md)*: Shows how to parse path and query arguments from a deep link.
- *[Synthetic BackStack](references/android/guide/navigation/navigation-3/recipes/deeplinks-syntheticbackstack.md)*: Shows how to handle deep links with a synthetic back stack.
- *[Custom Matcher](references/android/guide/navigation/navigation-3/recipes/deeplinks-custommatcher.md)*: Shows how to implement custom deep link matching logic.

### Scenes

#### Use built-in Scenes

- *[Dialog](references/android/guide/navigation/navigation-3/recipes/dialog.md)*: Shows how to create a Dialog.

#### Create custom Scenes

- *[BottomSheet](references/android/guide/navigation/navigation-3/recipes/bottomsheet.md)*: Shows how to create a BottomSheet destination.
- *[List-Detail Scene](references/android/guide/navigation/navigation-3/recipes/scenes-listdetail.md)*: Demonstrates how to implement adaptive list-detail layouts using the Navigation 3 Scenes API.
- *[Two pane Scene](references/android/guide/navigation/navigation-3/recipes/scenes-twopane.md)*: Demonstrates how to implement adaptive two-pane layouts using the Navigation 3 Scenes API.

### Material Adaptive

- *[Material List-Detail](references/android/guide/navigation/navigation-3/recipes/material-listdetail.md)*: Demonstrates how to implement an adaptive list-detail layout using Material 3 Adaptive.
- *[Material Supporting Pane](references/android/guide/navigation/navigation-3/recipes/material-supportingpane.md)*: Demonstrates how to implement an adaptive supporting pane layout using Material 3 Adaptive.

### Animations

- *[Animations](references/android/guide/navigation/navigation-3/recipes/animations.md)*: Shows how to override the default animations for all destinations and a single destination.
- *[Conditional Transitions](references/android/guide/navigation/navigation-3/recipes/conditional-transitions.md)*: Shows how to implement conditional transition animations.

### Common back stack behavior

- *[Multiple back stacks](references/android/guide/navigation/navigation-3/recipes/multiple-backstacks.md)*: 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](references/android/guide/navigation/navigation-3/recipes/conditional.md)*: Switch to a different navigation flow when a condition is met. For example, for authentication or first-time user onboarding.

### Lifecycle

- *[Lifecycle Owner](references/android/guide/navigation/navigation-3/recipes/lifecycle-owner.md)*: Shows how to use and observe Lifecycle in Navigation 3.

### Architecture

- *[Modularized navigation code (Hilt)](references/android/guide/navigation/navigation-3/recipes/modular-hilt.md)*: Demonstrates how to decouple navigation code into separate modules using Hilt or Dagger for DI.
- *[Modularized navigation code (Koin)](references/android/guide/navigation/navigation-3/recipes/modular-koin.md)*: Demonstrates how to decouple navigation code into separate modules using Koin for DI.

### Working with ViewModel

#### Passing navigation arguments

- *[Basic ViewModel](references/android/guide/navigation/navigation-3/recipes/passingarguments.md)* : Navigation arguments are passed to a `ViewModel` constructed using `viewModel()`

### Returning results

- *[Returning Results as Events](references/android/guide/navigation/navigation-3/recipes/results-event.md)* : Returning results as events to content in another `NavEntry`
- *[Returning Results as State](references/android/guide/navigation/navigation-3/recipes/results-state.md)* : Returning results as state stored in a `CompositionLocal`

© Google LLC · Apache-2.0 · android/skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor