compose-expert
Compose Expert guides you through creating reusable visual components that work across Android and Desktop platforms. Learn when to share composables in commonMain versus keeping them platform-specific, master state patterns like remember and derivedStateOf, and apply Material3 theming consistently. The skill covers component structure, state hoisting, recomposition optimization, and custom icon creation.
Compose Expert helps you build and share reusable UI components across Android and Desktop using Compose Multiplatform patterns.
AI-generated summary based on this skill's SKILL.md
Install
vitorpamplona/amethyst/compose-expert · repository language: Kotlin
git clone https://github.com/vitorpamplona/amethyst
cp -r amethyst/.claude/skills/compose-expert ~/.claude/skills/compose-expertFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I share composables across Android and Desktop?
Compose Expert recommends placing shared UI components in commonMain when they don't require platform-specific APIs. Use expect/actual declarations for platform-specific behavior, and structure composables with state hoisting so business logic remains platform-agnostic. Keep platform-specific navigation and system integration in androidMain and desktopMain modules. This approach maximizes code reuse while respecting platform differences.
What are compose multiplatform UI components best practices?
Compose Expert emphasizes building stateless, reusable composables with clear parameter contracts. Apply state hoisting to lift state management above UI layers, use @Stable and @Immutable annotations to prevent unnecessary recomposition, and structure components around Material3 theming for consistency. Test composables in isolation by providing all required state as parameters, making them predictable across platforms.
How should I optimize recomposition and state management?
Compose Expert teaches using remember, derivedStateOf, and produceState strategically to avoid redundant recompositions. Mark data classes with @Immutable and @Stable to help the compiler optimize comparisons. Implement the "state down, events up" pattern where parent composables manage state and children receive callbacks. Use lazy lists efficiently and avoid capturing mutable state in closures.
When should I use commonMain versus platform-specific UI?
Compose Expert advises sharing composables in commonMain when they're purely visual and don't depend on platform APIs. Keep navigation, system dialogs, and platform-specific layouts in androidMain or desktopMain. Use expect/actual for components requiring platform behavior, and delegate platform-specific concerns through callback parameters passed from platform modules.
How do I apply Material3 theming in multiplatform Compose?
Compose Expert guides defining Material3 ColorScheme, Typography, and Shapes in commonMain, then wrapping shared composables in a custom theme composable. Use platform-specific theme implementations in androidMain and desktopMain to handle system preferences or platform conventions. This ensures visual consistency while respecting each platform's design guidelines and user expectations.
What's the best way to create custom ImageVector icons?
Compose Expert recommends defining custom ImageVector icons in commonMain using the vector builder DSL, then caching them in objects to avoid recreation. For platform-specific icons, use expect/actual to provide platform-native implementations. Structure icon sets as reusable composables that accept size, tint, and content description parameters for accessibility and flexibility.
SKILL.md
rendered from the published skill — quoted content, verbatim
Compose Multiplatform Expert
Visual UI patterns for sharing composables across Android and Desktop.
When to Use This Skill
- Creating or refactoring shared UI components
- Deciding whether to share UI in
commonMainor keep platform-specific - Building custom ImageVector icons (robohash pattern)
- State management: remember, derivedStateOf, produceState
- Recomposition optimization: visual usage of @Stable/@Immutable
- Material3 theming and styling
- Performance: lazy lists, image loading
Delegate to other skills:
- Navigation structure → android-expert, desktop-expert
- Kotlin state patterns (StateFlow, sealed classes) →
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 6 files
.claude/skills/compose-expert/SKILL.md
.claude/skills/compose-expert/references/icon-assets.md
.claude/skills/compose-expert/references/rich-text-parsing.md
.claude/skills/compose-expert/references/shared-composables-catalog.md
.claude/skills/compose-expert/references/state-patterns.md
.claude/skills/compose-expert/scripts/find-composables.sh