compose-multiplatform-patterns

Standardize state management, navigation, theming, and recomposition in Kotlin Multiplatform Compose projects.

Updated May 9, 2026
One-click install
npx skills add https://github.com/kk20300113-png/my-claude-skills --skill compose-multiplatform-patterns-kk20300113-png
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/kk20300113-png/my-claude-skills/tree/main/compose-multiplatform-patterns
Command: npx skills add https://github.com/kk20300113-png/my-claude-skills --skill compose-multiplatform-patterns-kk20300113-png

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the common pain point of inconsistent, unoptimized shared UI code in Kotlin Multiplatform and Jetpack Compose projects, where teams lack standardized patterns for state management, navigation, theming, and performance tuning across Android, iOS, Desktop, and Web targets.

Core Features & Use Cases

  • Standardized State Management: Provides battle-tested patterns for ViewModel + StateFlow integration, event sink design, and stable type usage to reduce bugs and unnecessary recomposition.
  • Type-Safe Navigation: Implements modern Compose Navigation 2.8+ type-safe routing, plus dialog and bottom sheet navigation patterns for KMP and Android projects.
  • Cross-Platform UI Consistency: Includes expect/actual patterns for platform-specific composables, Material 3 dynamic theming, and slot-based composable design for reusable design systems.
  • Performance Optimization: Covers recomposition best practices, Lazy list keying, and derivedStateOf usage to eliminate jank and unnecessary allocations.
  • Use Case Example: For a KMP e-commerce app, use these patterns to implement a shared product list screen with search functionality, type-safe navigation to product detail pages, and platform-specific status bar styling that works natively on Android and iOS.

Quick Start

Ask your AI assistant to implement a type-safe navigation flow for your Compose Multiplatform app using the patterns defined in this skill.

Frequently Asked Questions about compose-multiplatform-patterns

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

FAQPage Schema
Can I use Material 3 dynamic theming across Android, iOS, Desktop, and Web targets with Kotlin Multiplatform?

Kotlin Multiplatform supports Material 3 dynamic theming across Android, iOS, Desktop, and Web targets through standardized theming patterns that ensure cross-platform UI consistency.

How do I standardize state management in Compose Multiplatform to avoid unnecessary recomposition?

Standardize Compose Multiplatform state management by integrating ViewModel with StateFlow, applying stable type usage, and utilizing event sinks to eliminate unnecessary recomposition across shared UI code.

How do I implement type-safe navigation in a Kotlin Multiplatform app?

Implement type-safe navigation in Kotlin Multiplatform apps by using Compose Navigation 2.8+ routing patterns, which support type-safe argument passing alongside dialog and bottom sheet navigation flows.

What is the best way to handle platform-specific UI components in Compose Multiplatform?

Handle platform-specific UI components in Compose Multiplatform by using expect/actual patterns for native integrations, paired with slot-based composable design for maintaining cross-platform UI consistency.

Why does my Jetpack Compose shared UI experience rendering jank on iOS and Android?

Jetpack Compose shared UI rendering jank is caused by common anti-patterns; eliminate it by applying recomposition best practices, proper Lazy list keying, and derivedStateOf usage to reduce allocations.

Can I use Material 3 dynamic theming across Android, iOS, Desktop, and Web targets with Kotlin Multiplatform?

Kotlin Multiplatform supports Material 3 dynamic theming across Android, iOS, Desktop, and Web targets through standardized theming patterns that ensure cross-platform UI consistency.