compose-multiplatform-patterns

Standardize Compose Multiplatform UI architecture with StateFlow, type-safe navigation, and recomposition optimization.

Updated Sep 13, 2025
One-click install
npx skills add https://github.com/llmh333/employee_management_spring --skill compose-multiplatform-patterns-llmh333
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/llmh333/employee_management_spring/tree/main/.gemini/skills/compose-multiplatform-patterns
Command: npx skills add https://github.com/llmh333/employee_management_spring --skill compose-multiplatform-patterns-llmh333

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design reliable, reusable UI architecture for Compose Multiplatform by showing practical patterns for state, navigation, theming, and performance.

Core Features & Use Cases

  • State management that scales: Use a single screen state object with StateFlow and collect it safely in Compose to keep UI consistent and testable.
  • Type-safe navigation for multiplatform: Define routes as serializable objects and handle dialog/bottom-sheet navigation declaratively.
  • Performance-focused composables: Apply stable types, correct list keys, derivedStateOf, and recomposition-friendly coding practices.
  • Theming and platform UI hooks: Use Material 3 dynamic theming and implement expect/actual platform-specific UI composables.

Quick Start

Ask the AI to draft a Kotlin Compose Multiplatform screen using a single StateFlow state object, an event sink, type-safe routes, and performance-safe recomposition practices.

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

State management in Compose Multiplatform uses a single screen state object backed by StateFlow, collected safely with lifecycle-aware methods to keep UI consistent and testable across platforms.

How do I implement type-safe navigation in Compose Multiplatform?▼

Type-safe navigation in Compose Multiplatform is implemented by defining routes as serializable objects and handling dialog or bottom-sheet navigation declaratively within your shared UI architecture.

How do I optimize recomposition performance in Kotlin Multiplatform Compose UI?▼

Recomposition performance is optimized by applying stable types, correct list keys, derivedStateOf, and recomposition-friendly coding practices to ensure efficient UI updates across Android, iOS, Desktop, and Web.

Can I use Material 3 dynamic theming with platform-specific hooks in Compose Multiplatform?▼

Material 3 dynamic theming is supported in Compose Multiplatform alongside expect/actual platform-specific UI composables to handle native rendering hooks and platform UI behaviors reliably.

What is the best way to structure reusable composables for shared KMP UI?▼

Reusable composables for shared KMP UI are structured using standardized patterns that isolate screen-level logic, applying stable models and lifecycle-aware state collection for scalable multiplatform architecture.