compose-expert

Build shared Jetpack Compose Multiplatform UI components with state management and Material3 theming.

Updated Feb 26, 2026
One-click install
npx skills add https://github.com/felipebrgs1/skills --skill compose-expert-felipebrgs1
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: compose-expert
Source: https://github.com/felipebrgs1/skills/tree/main/mobile/kotlin-ui
Command: npx skills add https://github.com/felipebrgs1/skills --skill compose-expert-felipebrgs1

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides advanced patterns and best practices for building sophisticated, shared UI components in Jetpack Compose Multiplatform, ensuring consistency and performance across Android and Desktop applications.

Core Features & Use Cases

  • Shared UI Components: Design and implement reusable UI elements that work seamlessly on both Android and Desktop.
  • State Management: Master remember, derivedStateOf, and produceState for efficient UI updates.
  • Recomposition Optimization: Utilize @Stable and @Immutable annotations to prevent unnecessary UI recompositions.
  • Material3 Theming: Implement consistent theming and styling across platforms.
  • Custom Icons: Create and manage custom ImageVector icons for a unified look.
  • Use Case: Develop a complex data visualization dashboard with interactive charts and custom-styled buttons that render identically and performantly on both mobile and desktop versions of your application.

Quick Start

Use the compose-expert skill to create a reusable AddButton composable with custom text and an onClick lambda.

Frequently Asked Questions about compose-expert

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

FAQPage Schema
How do I optimize recomposition in Compose Multiplatform?

Optimize Compose Multiplatform recomposition by applying @Stable and @Immutable annotations to classes, ensuring the compiler skips UI updates when state remains unchanged across Android and Desktop.

What is the best way to manage state in Compose Multiplatform?

The best way to manage state in Compose Multiplatform is combining remember for basic state hoisting, derivedStateOf for computed values, and produceState to convert external data streams into UI state.

How do I create custom ImageVector icons for Compose Multiplatform?

Create custom ImageVector icons for Compose Multiplatform using the ImageVector DSL, enabling you to design unified, scalable icon assets that render consistently across Android and Desktop.

Does Compose Multiplatform support Material3 theming for cross-platform UI?

Yes, Compose Multiplatform supports Material3 theming, allowing you to implement consistent color schemes, typography, and styling that work seamlessly across both Android and Desktop applications.

How do I build shared UI components for Android and Desktop?

Build shared UI components for Android and Desktop using Jetpack Compose Multiplatform, applying state hoisting and recomposition optimizations to ensure performant, reusable user interfaces across platforms.