compose-multiplatform-patterns

Structure Compose Multiplatform UI with shared state, navigation, theming, and performance patterns.

70|42|Updated Mar 27, 2026
One-click install
npx skills add https://github.com/tranhieutt/software_development_department --skill compose-multiplatform-patterns-tranhieutt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/tranhieutt/software_development_department/tree/main/.claude/skills/compose-multiplatform-patterns
Command: npx skills add https://github.com/tranhieutt/software_development_department --skill compose-multiplatform-patterns-tranhieutt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Compose Multiplatform Patterns eliminates scattered Jetpack Compose guidance by consolidating state management, navigation, theming, and performance advice for Kotlin multiplatform UI teams.

Core Features & Use Cases

  • State-first architecture: Use a single state data class, StateFlow, and event sink patterns so ViewModels coexist cleanly with composables across Android, iOS, Desktop, and Web.
  • Navigation and composable design: Adopt type-safe routes, dialog overlays, and slot-based APIs to keep navigation flows predictable and UI components reusable.
  • Platform-specific theming and performance: Balance Material 3 theming, expect/actual platform composables, derived state, stable models, and proper keys to prevent recomposition issues in shared UI modules.

Quick Start

Ask the Compose Multiplatform Patterns skill to outline the state, navigation, theming, and performance patterns for your Kotlin UI module.

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 Kotlin Multiplatform with Compose?

Structure Compose Multiplatform navigation by adopting type-safe routes, dialog overlays, and slot-based APIs to keep navigation flows predictable and UI components reusable across platforms.

What's the best way to handle platform-specific UI in Compose Multiplatform?

Handle platform-specific UI in Compose Multiplatform by using expect/actual platform composables, allowing you to satisfy cross-platform requirements while balancing Material 3 theming in shared UI modules.

Why does my Compose Multiplatform UI recompose excessively on iOS and Android?

Excessive recomposition in Compose Multiplatform happens when models are unstable or keys are missing. Prevent this by using derived state, stable models, and proper keys to optimize recomposition in shared UI modules.

Can I use Material 3 theming across shared Kotlin Multiplatform UI modules?

Yes, you can apply Material 3 theming across shared Kotlin Multiplatform UI modules. The approach balances Material theming with expect/actual platform composables to maintain consistent UIs across Android, iOS, Desktop, and Web.

How do I structure shared ViewModels for Compose Multiplatform interfaces?

Structure shared ViewModels for Compose Multiplatform interfaces by using a state-first architecture with a single state data class, StateFlow, and sealed events so ViewModels coexist cleanly with composables.