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.