compose-navigation

Configure type-safe NavHost navigation with routes, arguments, and deep links.

Updated Dec 4, 2025
One-click install
npx skills add https://github.com/thinhtt264/Snaplet-App --skill compose-navigation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-navigation
Source: https://github.com/thinhtt264/Snaplet-App/tree/main/.cursor/skills/compose-navigation
Command: npx skills add https://github.com/thinhtt264/Snaplet-App --skill compose-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Jetpack Compose apps often require navigating between screens with arguments, deep links, and nested graphs. This skill provides a type-safe navigation pattern that reduces boilerplate and runtime errors.

Core Features & Use Cases

  • Type-Safe Routes: Use @Serializable routes to define screens with required and optional arguments.
  • NavHost & NavController: Set up a robust navigation graph with start destinations and nested graphs.
  • Deep Linking & Testing: Support deep links and testable navigation flows across the app.

Quick Start

Use the compose-navigation skill to set up a type-safe NavHost between Home and Profile screens, pass a userId argument, and handle a sample deep link.

Frequently Asked Questions about compose-navigation

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

FAQPage Schema
How do I set up type-safe navigation in Jetpack Compose?

Type-safe navigation in Jetpack Compose uses @Serializable route definitions and a NavHost to establish robust navigation graphs, reducing boilerplate and runtime errors. You configure the NavController with start destinations and pass arguments directly as serialized objects.

How do I pass arguments between screens using Navigation Compose?

Passing arguments with Navigation Compose involves defining @Serializable routes with required and optional parameters. You extract these arguments in subsequent screens or ViewModels using utilities like SavedStateHandle.toRoute for type-safe access.

Can I handle deep links with type-safe navigation in Compose?

Yes, deep linking is supported within the type-safe navigation pattern for Compose. You define deep links in your NavHost configuration, allowing external triggers to route directly to specific screens while maintaining type safety for any arguments passed.

Does this type-safe Compose navigation pattern support nested graphs?

Yes, the type-safe navigation pattern supports nested graphs within the NavHost setup. You can group related destinations into nested structures to organize complex screen flows while maintaining type-safe argument passing and state restoration.

How do I restore state and manage back stack with NavController in Compose?

Managing the back stack with NavController requires proper usage of popUpTo, launchSingleTop, and restoreState options. These configurations ensure screens are not duplicated on the back stack and user state is preserved during navigation transitions.

What is the best way to test navigation flows across Compose screens?

Testing navigation flows across Compose screens involves verifying the NavHost configuration and argument passing logic. You can validate type-safe routes, deep link handling, and state restoration across screen transitions using the navigation-compose library utilities.