compose-multiplatform-patterns

Guide Compose Multiplatform projects to implement scalable UI patterns.

1|Updated Mar 3, 2026
One-click install
npx skills add https://github.com/samymity/bridge-ventures-backend --skill compose-multiplatform-patterns-samymity
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/samymity/bridge-ventures-backend/tree/main/.claude/skills/compose-multiplatform-patterns
Command: npx skills add https://github.com/samymity/bridge-ventures-backend --skill compose-multiplatform-patterns-samymity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates scattered, inconsistent UI architecture in KMP/Compose projects by providing proven patterns for state management, navigation, theming, and performance.

Core Features & Use Cases

  • Shared UI architecture for KMP: Standardize composable design, slot-based APIs, and platform-specific UI via expect/actual.
  • Predictable state management: Model screen state as a single immutable data object using StateFlow, collect in Compose with lifecycle awareness, and handle UI events via an event sink (sealed interface).
  • Type-safe navigation & overlays: Implement navigation with serializable routes and support dialog/bottom-sheet overlay flows without imperative show/hide.
  • Performance guardrails: Use stable types, correct LazyColumn keys, derivedStateOf for derived UI flags, and minimize allocations during recomposition.
  • Theming that fits real devices: Apply Material 3 theming with optional dynamic color handling and dark/light switching.

Quick Start

Ask an AI assistant to outline a KMP screen using a single StateFlow state object, a sealed event interface, type-safe routes, and stable performance practices for Compose Multiplatform and Android Compose.

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 Compose Multiplatform using StateFlow?

State management in Compose Multiplatform uses a single immutable state object exposed via StateFlow, collected in Compose with lifecycle awareness, and handles UI events through a sealed interface event sink.

What's the best way to implement type-safe navigation in Jetpack Compose?

Type-safe navigation in Jetpack Compose uses serializable routes to define destinations and manages dialog or bottom-sheet overlays without imperative show/hide logic, standardizing navigation across shared KMP modules.

Does Compose Multiplatform support Material 3 theming across platforms?

Material 3 theming in Compose Multiplatform supports optional dynamic color handling and dark/light switching, applied consistently across platform-specific UI implementations using expect/actual patterns.

How do I fix recomposition performance issues in Kotlin Multiplatform UI?

Recomposition performance in Kotlin Multiplatform UI is optimized by using stable types, correct LazyColumn keys, derivedStateOf for derived UI flags, and minimizing allocations during recomposition.

How do I structure screen state for a shared KMP UI module?

Screen state for shared KMP UI modules is structured by modeling a single immutable data object, collecting it with lifecycle-aware Compose, and routing user interactions through an event sink sealed interface.

Can I use Jetpack Compose ViewModels with Kotlin Multiplatform projects?

Kotlin Multiplatform projects structure ViewModel state with StateFlow and collect it using lifecycle-aware Compose, allowing shared UI architecture patterns to scale across platform-specific implementations.