navigation-compose-kmp

Implements type-safe screen navigation in Kotlin Multiplatform Compose projects using Navigation 3 or Navigation 2.

Updated Sep 12, 2026
One-click install
npx skills add https://github.com/Vierco/citoVisionApp --skill navigation-compose-kmp-vierco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: navigation-compose-kmp
Source: https://github.com/Vierco/citoVisionApp/tree/main/.claude/skills/navigation-compose-kmp
Command: npx skills add https://github.com/Vierco/citoVisionApp --skill navigation-compose-kmp-vierco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and implementing navigation in a Kotlin Multiplatform Compose project is error-prone: Navigation 3 is stable on Android but its multiplatform pieces may still be in alpha, ViewModels often get coupled to NavController, and routes defined as raw Strings lose type safety. This Skill provides a decision framework and implementation rules for clean, testable navigation across Android, iOS, and Desktop. ## Core Features & Use Cases - Framework Decision Guide: Choose between Navigation 3 (androidx.navigation3) and Navigation 2 Compose Multiplatform (org.jetbrains.androidx.navigation:navigation-compose) based on verified library maturity for your target platforms. - Type-Safe Routes: Define destinations as @Serializable data classes/objects in presentation/navigation/routes instead of loose Strings. - Decoupled ViewModels: ViewModels emit NavigationEvent objects through a Channel/SharedFlow; only the NavHost/NavDisplay container translates events into real navigation calls. - Use Case: When adding a new feature with a list screen and a detail screen, use this Skill to define HomeRoute and DetailRoute, wire the ViewModel's navigation events, and pick the correct navigation library for your iOS/Desktop targets. ## Quick Start Ask the assistant to define the navigation for a new feature with a list screen and a detail screen in your Compose Multiplatform project, choosing between Navigation 3 and Navigation 2 based on current library stability.

Frequently Asked Questions about navigation-compose-kmp

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

FAQPage Schema
How do I implement navigation in Compose Multiplatform for Android, iOS, and Desktop?▼

Define routes as @Serializable data classes, then use either Navigation 3 (NavBackStack + NavDisplay) or Navigation 2 Compose Multiplatform (NavController + NavHost) as the container. ViewModels emit NavigationEvent objects that the container collects and translates into actual navigation calls.

Navigation 3 vs Navigation 2 Compose Multiplatform: which should I use?▼

Navigation 3 is stable on Android but its multiplatform pieces (navigation3-ui, adaptive-navigation3, lifecycle-viewmodel-navigation3) may still be in alpha for iOS/Desktop. Check the official documentation first; if they remain in alpha, use Navigation 2 Compose Multiplatform, which is stable on all three platforms.

Should a ViewModel hold a NavController reference in Compose?▼

No. The ViewModel should expose navigation intent through a Channel or SharedFlow of NavigationEvent objects. Only the NavHost or NavDisplay container collects these events and calls navigate() or backStack.add(), keeping the ViewModel testable and decoupled.

Can I use androidx.navigation:navigation-compose in commonMain of a KMP project?▼

No. The androidx.navigation:navigation-compose artifact is Android-only. In commonMain you must use org.jetbrains.androidx.navigation:navigation-compose, which is the JetBrains multiplatform artifact supporting Android, iOS, and Desktop.

Why should navigation routes be @Serializable classes instead of Strings?▼

String routes like "detail/{id}" lose type safety and fail at runtime on typos or missing parameters. @Serializable data classes give compile-time checking of route parameters and work with type-safe APIs like composable<T>() and toRoute<T>().

When should I not use this navigation Skill?▼

Do not use it to design the ViewModel, UiState, or UiEvent structure itself (that belongs to an MVVM skill), for dependency injection setup, or for deep links unless the developer explicitly requests them.