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
Decision gist · record as of 2026-07-27
Compose Multiplatform Patterns teaches shared UI development across Android, iOS, Desktop, and Web using Compose. 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.
Use it when
- compose-multiplatform-patterns covers implementing state management by combining ViewModels with StateFlow to create reactive.
- compose-multiplatform-patterns demonstrates type-safe navigation by showing how to implement routing that leverages Kotlin's type system.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
affaan-m/ECC/compose-multiplatform-patterns · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/compose-multiplatform-patterns/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Learn Compose Multiplatform patterns for shared UI across Android, iOS, Desktop, Web”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master Android development using Kotlin and Jetpack Compose for declarative UI building. Learn clean architecture patterns, dependency injection with Hilt, Room database integration, and Retrofit API calls across phones, tablets, TV, Wear OS, and Android Auto.
This skill equips you to develop Android applications using Kotlin's modern ecosystem. Leverage Jetpack Compose for declarative UI, Coroutines for asynchronous programming, and Hilt for dependency injection to create robust, maintainable mobile apps.
This skill equips you to develop applications that run seamlessly across multiple platforms—Android, iOS, desktop, and web—by leveraging shared Kotlin codebases. Learn to structure projects for maximum code reuse while handling platform-specific implementations efficiently. Master the patterns and tools that make Kotlin Multiplatform a practical choice for teams building truly portable applications.
This skill equips Claude Code with modern Android development expertise, covering clean architecture principles, Jetpack Compose UI patterns, and data layer best practices aligned with Google's reference implementations. It enables developers to scaffold and maintain production-grade Android applications using industry-standard tooling and design patterns.
Compose Expert guides you through creating reusable visual components that work across Android and Desktop platforms. Learn when to share composables in commonMain versus keeping them platform-specific, master state patterns like remember and derivedStateOf, and apply Material3 theming consistently. The skill covers component structure, state hoisting, recomposition optimization, and custom icon creation.
Learn to organize Android and KMP projects using Clean Architecture principles, including module boundaries, dependency inversion, and layered data flow. Covers UseCase and Repository patterns, database integration with Room and SQLDelight, network clients with Ktor, and dependency injection setup with Koin or Hilt.
More skills kotlin-expert (Apache-2.0) · compose-modifier-and-layout-style (Apache-2.0) · kotlin-multiplatform (MIT) · Compose Expert (NOASSERTION) · android-compose-foundations (MIT)