compose-multiplatform-patterns

Name: compose-multiplatform-patterns
Availability: InStock
Author: azusagasaku

Implements Compose Multiplatform patterns for state management, navigation, theming, and performance in KMP projects.

Updated May 19, 2026

Search Tags:#state management #navigation #Jetpack Compose #recomposition #Kotlin Multiplatform #Compose Multiplatform #material 3

Ready to run

npx skills add https://github.com/azusagasaku/--claude-config --skill compose-multiplatform-patterns-azusagasaku

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/azusagasaku/--claude-config/tree/main/skills/ecc/compose-multiplatform-patterns
Command: npx skills add https://github.com/azusagasaku/--claude-config --skill compose-multiplatform-patterns-azusagasaku

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building shared UI across Android, iOS, Desktop, and Web with Compose Multiplatform involves recurring decisions about state management, navigation, theming, and recomposition performance, and inconsistent patterns lead to bugs and wasted effort. ## Core Features & Use Cases - State Management Patterns: Single state object with StateFlow, lifecycle-aware collection, and sealed-interface event sinks for complex screens. - Type-Safe Navigation: Serializable route objects with Compose Navigation 2.8+, including dialog and bottom sheet destinations. - Composable Design & Performance: Slot-based APIs, correct modifier ordering, stable types, keyed lazy lists, and derivedStateOf to minimize recomposition. - Use Case: When building a KMP app screen, apply the ViewModel + StateFlow pattern with an event sink, wire type-safe navigation routes, and mark UI models @Immutable to keep recomposition efficient. ## Quick Start Ask the AI to scaffold a Compose Multiplatform screen with a ViewModel, single state object, and type-safe navigation route for your KMP project.

Frequently Asked Questions about compose-multiplatform-patterns

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

FAQPage Schema

How do I manage UI state in Compose Multiplatform with ViewModels?▼

Use a single immutable data class for screen state exposed as StateFlow from the ViewModel, and collect it with collectAsStateWithLifecycle in the composable. For complex screens, route user actions through a sealed interface event sink instead of multiple callback lambdas.

How to implement type-safe navigation in Jetpack Compose?▼

Define routes as @Serializable objects or data classes and register them with composable<Route> in the NavHost, available in Compose Navigation 2.8+. Retrieve arguments with backStackEntry.toRoute<Route>() and navigate by passing route instances to navController.navigate.

Can I share Compose UI between Android and iOS in KMP?▼

Yes, Compose Multiplatform shares UI across Android, iOS, Desktop, and Web from commonMain. For platform-specific behavior like status bar styling, declare an expect composable in commonMain and provide actual implementations per platform source set.

Why does my composable recompose too often?▼

Excessive recomposition usually comes from unstable parameter types, new object instances created in composable parameters, or heavy computation inside composables. Mark UI models @Immutable or @Stable, wrap derived values in remember or derivedStateOf, and move computation to the ViewModel.

Should I pass NavController into composables?▼

No, passing NavController deep into composables is an anti-pattern that couples UI to navigation. Pass lambda callbacks like onNavigateToDetail instead, keeping composables stateless, previewable, and easy to test.