compose-multiplatform-patterns
Master patterns for building shared UI with Compose Multiplatform and Jetpack Compose across multiple platforms. Covers state management with ViewModels, type-safe navigation, reusable composable design, platform-specific implementations, and recomposition optimization.
Compose Multiplatform Patterns teaches shared UI development across Android, iOS, Desktop, and Web using Compose.
AI-generated summary based on this skill's SKILL.md
Install
affaan-m/ECC/compose-multiplatform-patterns · repository language: JavaScript
git clone https://github.com/affaan-m/ECC
cp -r ECC/skills/compose-multiplatform-patterns ~/.claude/skills/compose-multiplatform-patternsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the core compose multiplatform patterns for shared UI?
compose-multiplatform-patterns teaches you how to build shared UI across Android, iOS, Desktop, and Web using Compose Multiplatform. The skill covers architectural patterns that let you write composables once and deploy them across platforms, including expect/actual mechanisms for platform-specific UI when needed, slot-based APIs for flexible component design, and best practices for structuring reusable composables that work seamlessly in multiplatform projects.
How do you implement state management with ViewModel and StateFlow in Compose?
compose-multiplatform-patterns covers implementing state management by combining ViewModels with StateFlow to create reactive, predictable state flows in Compose applications. You'll learn how to structure your ViewModel to expose StateFlow instances, consume them safely in composables, apply the event sink pattern for user interactions, and use derivedStateOf to compute derived state efficiently without unnecessary recompositions.
How can you set up type-safe routing in Compose Multiplatform or Jetpack Compose?
compose-multiplatform-patterns demonstrates type-safe navigation by showing how to implement routing that leverages Kotlin's type system to prevent runtime navigation errors. The skill covers navigation architecture patterns, handling bottom sheets and dialogs within navigation flows, and structuring your navigation graph so that type safety is maintained across all platforms in a Compose Multiplatform project.
What techniques optimize Compose recomposition and rendering performance?
compose-multiplatform-patterns teaches performance optimization through understanding recomposition skipping, proper use of compose lazy list keys to prevent unnecessary recompositions, correct modifier ordering to avoid layout thrashing, and ensuring your data types are stable and immutable. You'll learn anti-patterns to avoid and how to profile and measure recomposition to identify bottlenecks in your Compose applications.
How do you design reusable composables with Material 3 theming?
compose-multiplatform-patterns covers composable design best practices including creating flexible, reusable components through slot-based APIs, applying Material 3 theming consistently across your UI, and structuring your design system so it works across all Compose Multiplatform targets. You'll learn how to build composables that adapt to different platforms while maintaining a cohesive visual language.
What platform-specific UI patterns does Compose Multiplatform support?
compose-multiplatform-patterns explains the expect/actual pattern for implementing platform-specific UI when shared code isn't sufficient. This mechanism lets you define expect declarations in common code and provide actual implementations for Android, iOS, Desktop, and Web, enabling you to leverage platform-native capabilities while keeping the majority of your UI logic shared across targets.
SKILL.md
rendered from the published skill — quoted content, verbatim
Compose Multiplatform Patterns
Patterns for building shared UI across Android, iOS, Desktop, and Web using Compose Multiplatform and Jetpack Compose. Covers state management, navigation, theming, and performance.
When to Activate
- Building Compose UI (Jetpack Compose or Compose Multiplatform)
- Managing UI state with ViewModels and Compose state
- Implementing navigation in KMP or Android projects
- Designing reusable composables and design systems
- Optimizing recomposition and rendering performance
State Management
ViewModel + Single State Object
Use a single data class for screen state. Expose it as StateFlow and collect in Compose:
```kotlin data class ItemListState( val items: List<Item> = emptyList(), val isLoading: Boolean = false, val error: String? = null, val searchQuery: String = "" )
class ItemListViewModel( private val getItems: GetItemsUseCase ) : ViewModel() { private val _state =
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/compose-multiplatform-patterns/SKILL.md