compose-multiplatform-patterns

Implements Compose Multiplatform and Jetpack Compose patterns for state, navigation, theming, and performance.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill compose-multiplatform-patterns-ravitejakarra24
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/pi/.pi/agent/skills/compose-multiplatform-patterns
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill compose-multiplatform-patterns-ravitejakarra24

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 getting these wrong leads to buggy, hard-to-maintain code. ## Core Features & Use Cases - State Management Patterns: Single-state-object ViewModels with StateFlow, lifecycle-aware collection via collectAsStateWithLifecycle, 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, @Immutable models, keyed lazy lists, derivedStateOf, and allocation avoidance during recomposition. - Use Case: When building a KMP app screen, apply the ViewModel + single state class pattern with an event sink, wire it to a stateless composable, and navigate using @Serializable routes. ## Quick Start Ask the agent to scaffold a Compose Multiplatform screen with a ViewModel, single state object, event sink, and type-safe navigation route.

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 state in Compose Multiplatform with ViewModels?

Use a single immutable data class for screen state exposed as StateFlow from the ViewModel, and collect it in Compose with collectAsStateWithLifecycle. Update state via MutableStateFlow.update inside viewModelScope coroutines.

How to implement type-safe navigation in Jetpack Compose?

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

Does Compose Multiplatform support platform-specific UI on Android and iOS?

Yes, use expect/actual declarations for platform composables, such as an expect PlatformStatusBar in commonMain with actual implementations in androidMain and iosMain. Android can use system UI controller libraries while iOS relies on UIKit interop or Info.plist.

Why does my composable recompose too often?

Frequent recomposition usually comes from unstable parameter types, new object instances created in composable parameters, or unkeyed lazy list items. Mark models @Immutable, remember computed values, and provide stable keys in LazyColumn items.

When should I use an event sink instead of callback lambdas in Compose?

Use a sealed-interface event sink when a screen has many user actions, so the composable takes a single onEvent lambda instead of numerous callbacks. The ViewModel handles events in a when block, keeping the composable stateless and testable.