skills.rest
Femad-6
Femad-6COMMUNITY
Explore all skills by this author →
WebsiteGitHub

compose-multiplatform-patterns

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

Updated Mar 25, 2026
Search Tags:#navigation#jetpack compose#stateflow#recomposition#compose multiplatform#material 3#kotlin multiplatform
One-click install
npx skills add https://github.com/Femad-6/my-skills --skill compose-multiplatform-patterns-femad-6
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/Femad-6/my-skills/tree/main/.github/skills/compose-multiplatform-patterns
Command: npx skills add https://github.com/Femad-6/my-skills --skill compose-multiplatform-patterns-femad-6

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building shared UI across Android, iOS, Desktop, and Web with Compose Multiplatform introduces recurring challenges: managing UI state safely, wiring type-safe navigation, avoiding unnecessary recomposition, and handling platform-specific behavior. This Skill provides proven patterns and code templates that address each of these problems directly. ## Core Features & Use Cases - State Management: ViewModel with a single StateFlow state object, lifecycle-aware collection via collectAsStateWithLifecycle, and the event sink pattern using sealed interfaces. - Type-Safe Navigation: Serializable route objects with Compose Navigation 2.8+, including dialog and bottom sheet destinations. - Composable Design & Theming: Slot-based APIs, correct modifier ordering, and Material 3 dynamic theming. - Performance Optimization: @Stable/@Immutable annotations, keyed lazy lists, derivedStateOf, and allocation avoidance during recomposition. - Use Case: When building a KMP app screen that shows a searchable item list, apply the single-state ViewModel pattern, wire type-safe navigation to a detail route, and keep recomposition minimal with stable UI models. ## Quick Start Ask the AI to scaffold a Compose Multiplatform screen with a ViewModel, StateFlow state, and type-safe navigation following these patterns.

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 ViewModel?▼

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, keeping composables stateless and easy to preview and test.

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 instead of string paths.

Does Compose Multiplatform support platform-specific UI behavior?▼

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

Why does my composable recompose too often?▼

Frequent recomposition usually comes from unstable parameter types, new object allocations in composable parameters, or heavy computation inside composables. Mark models @Immutable or @Stable, hoist work into the ViewModel or remember blocks, and use derivedStateOf for deferred reads.

Should I pass NavController into composables?▼

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

Related Skills

Explore More Software Engineering Skills→
Michae2xlMichae2xl

android-clean-architecture

Define module boundaries and dependency rules for Android and Kotlin Multiplatform projects.

Community
Advanced
pddhktpddhkt
1

android

Enable Android UI, navigation, and DI patterns in Kotlin Multiplatform projects.

Community
Intermediate
cescraflicescrafli

kotlin-coroutines-flows

Implement structured concurrency and Flow-based data streams with Kotlin coroutines.

Community
Advanced
arbisoftarbisoft
4

compose-multiplatform-patterns

Coordinate UI patterns across Android, iOS, Desktop, and Web with Compose Multiplatform.

Official
Advanced