compose-multiplatform-patterns

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

1|Updated Oct 11, 2025
One-click install
npx skills add https://github.com/ibytechaos/claude --skill compose-multiplatform-patterns-ibytechaos
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/ibytechaos/claude/tree/main/plugins/everything-claude-code/skills/compose-multiplatform-patterns
Command: npx skills add https://github.com/ibytechaos/claude --skill compose-multiplatform-patterns-ibytechaos

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-test screens. ## 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, @Stable/@Immutable models, keyed lazy lists, and derivedStateOf to minimize recomposition. - Use Case: When building a KMP app screen that shares UI between Android and iOS, apply the expect/actual platform composable pattern and the ViewModel state pattern to keep common code testable and platform differences isolated. ## Quick Start Ask the assistant to apply Compose Multiplatform patterns to design a stateless screen with a ViewModel, type-safe navigation route, and Material 3 theme for a 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 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 with copy operations rather than mutableStateOf.

How to set up 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 to navController.navigate.

Can Compose Multiplatform handle platform-specific UI on Android and iOS?

Yes, use expect/actual declarations for platform composables. Declare an expect composable in commonMain and provide actual implementations in androidMain and iosMain, such as a PlatformStatusBar that uses system UI controllers on Android and UIKit interop on iOS.

Why does my composable recompose too often?

Excessive recomposition usually comes from unstable parameter types, new object allocations in composable parameters, or reading state too early. Mark models @Immutable or @Stable, wrap derived values in remember with derivedStateOf, and provide stable keys in lazy lists.

Should I pass NavController into composables?

No, passing NavController deep into composables is an anti-pattern. Pass navigation lambda callbacks or a single event sink function instead, which keeps composables stateless, previewable, and easy to test.