compose-multiplatform-patterns

Document Compose Multiplatform patterns for shared UI across Android, iOS, Desktop, and Web.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/cescrafli/compyrasion --skill compose-multiplatform-patterns-cescrafli
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/cescrafli/compyrasion/tree/main/skills/compose-multiplatform-patterns
Command: npx skills add https://github.com/cescrafli/compyrasion --skill compose-multiplatform-patterns-cescrafli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Compose Multiplatform patterns address the fragmentation of UI development across Android, iOS, Desktop, and Web by providing a cohesive set of patterns for shared state, navigation, theming, and performance.

Core Features & Use Cases

  • State management with a single source of truth using ViewModel, StateFlow, and immutable state objects to drive Compose UIs.
  • Type-safe navigation and modular UI composition for Kotlin Multiplatform and Android projects, including dialog and bottom sheet patterns.
  • Theming and design system guidance, including Material 3 theming and platform-aware UI decisions, with slot-based composables for flexibility.
  • Performance-oriented patterns such as stable data models, correct key usage in lists, derived state, and minimizing allocations.

Quick Start

Create a shared UI module for a multiplatform project by implementing a single-state pattern, type-safe navigation, and platform-specific theming.

Frequently Asked Questions about compose-multiplatform-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I share state management across Android and iOS using Compose Multiplatform?

Share state management across Android and iOS using a single source of truth with ViewModel, StateFlow, and immutable state objects to drive Compose UIs consistently across platforms.

What's the best way to handle navigation in a Kotlin Multiplatform shared UI module?

Handle navigation in a Kotlin Multiplatform shared UI module using type-safe navigation patterns, including modular UI composition, dialog, and bottom sheet patterns for Android and iOS.

How do I apply Material 3 theming with platform-aware decisions in Compose Multiplatform?

Apply Material 3 theming with platform-aware decisions in Compose Multiplatform by using slot-based composables for flexibility, ensuring the design system adapts correctly across Android, iOS, Desktop, and Web.

Why does my Compose Multiplatform UI have performance issues on large lists?

Compose Multiplatform UI performance issues on large lists are resolved by using stable data models, correct key usage in lists, derived state, and minimizing allocations to optimize recomposition.

Can I use Jetpack Compose patterns for Desktop and Web platforms?

Jetpack Compose patterns can be used for Desktop and Web platforms, as Compose Multiplatform provides cohesive patterns for theming, navigation, and state management across Android, iOS, Desktop, and Web.

Do I need a shared UI module to implement cross-platform Compose patterns?

A shared UI module is needed to implement cross-platform Compose patterns effectively, allowing you to establish a single-state pattern, type-safe navigation, and platform-specific theming across your multiplatform project.