compose-multiplatform-patterns

Manage shared Compose UI patterns across Kotlin Multiplatform projects.

1|Updated Mar 18, 2026
One-click install
npx skills add https://github.com/xxih/ai-harness-zh --skill compose-multiplatform-patterns-xxih
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/xxih/ai-harness-zh/tree/main/references/translations/everything-claude-code/docs/zh-CN/skills/compose-multiplatform-patterns
Command: npx skills add https://github.com/xxih/ai-harness-zh --skill compose-multiplatform-patterns-xxih

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Cross-platform Compose projects face fragmentation of UI logic, inconsistent state handling, fragile navigation, and performance regressions from unnecessary recompositions; this Skill consolidates idiomatic patterns to build consistent, testable, and efficient shared UIs across Android, iOS, desktop, and web.

Core Features & Use Cases

  • Single-state ViewModel with StateFlow: Use a single immutable screen state exposed as StateFlow to simplify state management and lifecycle-safe collection in Composables.
  • Type-safe navigation: Define serializable route objects and use NavHost patterns for predictable navigation, dialogs, and bottom-sheet flows.
  • Composable design & slot APIs: Build reusable composables with slot-based APIs and correct modifier ordering to enable flexible theming and testing.
  • Performance patterns: Apply stability annotations, derivedStateOf, keyed lazy lists, and allocation avoidance strategies to reduce unnecessary recompositions.
  • Platform-specific integration: Use expect/actual composables to adapt platform behaviors such as status bars while keeping shared UI logic in common code.

Quick Start

In your KMP project, expose a single immutable screen state from a ViewModel as StateFlow, collect it in Composables with lifecycle-aware helpers, and refactor UI into stateless slot-based composables for reuse.

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 shared Compose UI state across Kotlin Multiplatform platforms?▼

Manage shared Compose UI state across Kotlin Multiplatform by exposing a single immutable screen state from a ViewModel as StateFlow. Collect this state in Composables using lifecycle-aware helpers to ensure consistent and testable state management across Android, iOS, desktop, and web.

Can I use type-safe navigation with Jetpack Compose in a KMP project?▼

Type-safe navigation in a KMP project is achieved by defining serializable route objects and applying NavHost patterns. This approach ensures predictable navigation, dialog handling, and bottom-sheet flows across shared Compose UIs.

What's the best way to reduce unnecessary recompositions in Compose Multiplatform?▼

Reduce unnecessary recompositions in Compose Multiplatform by applying stability annotations, using derivedStateOf, implementing keyed lazy lists, and adopting allocation avoidance strategies to optimize performance across shared UI components.

How do I handle platform-specific UI behaviors while sharing Compose logic?▼

Handle platform-specific UI behaviors while sharing Compose logic by using expect/actual composables to adapt platform behaviors like status bars. This keeps the core shared UI logic in common code while accommodating platform differences.

How do I build reusable Compose components for cross-platform apps?▼

Build reusable Compose components for cross-platform apps by designing stateless slot-based composables with slot APIs and correct modifier ordering. This pattern enables flexible theming, extensive reuse, and easier testing across Android, desktop, and web.