compose-multiplatform-patterns

Provides Compose Multiplatform UI patterns covering state, navigation, theming, and performance optimization.

Updated Jun 22, 2026
One-click install
npx skills add https://github.com/TymorIbrahim/UniPilot --skill compose-multiplatform-patterns-tymoribrahim
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-multiplatform-patterns
Source: https://github.com/TymorIbrahim/UniPilot/tree/main/.cursor/skills/compose-multiplatform-patterns
Command: npx skills add https://github.com/TymorIbrahim/UniPilot --skill compose-multiplatform-patterns-tymoribrahim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of building cross-platform UIs for Android, iOS, Desktop, and Web using Compose Multiplatform and Jetpack Compose, covering state management, navigation, theming, performance, and platform-specific UI considerations.

Core Features & Use Cases

  • State Management: Implement state management using ViewModels and Compose state, with support for Single State Object and Event Sink Pattern.
  • Navigation: Utilize Type-Safe Navigation for efficient routing and Dialog/Bottom Sheet Navigation patterns.
  • Composable Design: Leverage Slot-Based APIs and Modifier Ordering best practices for better composability.
  • Platform-Specific UI: Address platform-specific UI concerns with expect/actual for Platform Composables.
  • Performance: Employ Stable Types for Skippable Recomposition, Lazy Lists, and Derived State to optimize performance.
  • Theming: Integrate Material 3 Dynamic Theming for a responsive and adaptive UI experience.
  • Anti-Patterns: Guide users to avoid common pitfalls like mutableStateOf misuse and excessive recomposition.

Quick Start

Run the 'compose-multiplatform-patterns' skill to explore patterns for shared UI development across different platforms.

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 ViewModels?

State management in Compose Multiplatform involves using ViewModels with Compose state, utilizing Single State Object and Event Sink Pattern to handle shared UI logic across platforms.

What's the best way to handle navigation in Jetpack Compose cross-platform apps?

Jetpack Compose navigation in cross-platform apps is best handled using Type-Safe Navigation for routing, alongside specific Dialog and Bottom Sheet Navigation patterns.

How does expect/actual work for platform-specific UI in Compose Multiplatform?

Expect/actual functions in Compose Multiplatform allow you to declare platform-agnostic composable signatures and provide distinct UI implementations for Android, iOS, Desktop, and Web.

Why does my Jetpack Compose UI recompose excessively and how can I optimize it?

Excessive recomposition in Jetpack Compose is often caused by unstable types. You can optimize performance by using stable types for skippable recomposition, optimizing lazy lists, and leveraging derived state.

When do I need Material 3 Dynamic Theming for Compose Multiplatform?

Material 3 Dynamic Theming is needed for Compose Multiplatform when you want to build a responsive and adaptive UI experience that adjusts to platform-specific styling cues.

What are common Compose Multiplatform anti-patterns to avoid?

Common Compose Multiplatform anti-patterns include mutableStateOf misuse and excessive recomposition. Following Slot-Based APIs and Modifier Ordering best practices helps avoid these pitfalls.