jetpack-compose_skill

Overview

This skill provides practical guidance and patterns for building Android UIs with Jetpack Compose. It focuses on state management, state hoisting, ViewModel integration, side effects, efficient recomposition, navigation, and Material 3 theming to help you create robust, maintainable composables.

How this skill works

The skill outlines core Compose primitives—remember, rememberSaveable, mutableStateOf, and derivedStateOf—and shows how to lift state to parents for reusable, stateless composables. It demonstrates integrating ViewModel and StateFlow with composables, handling side effects via LaunchedEffect/DisposableEffect/SideEffect, and optimizing recomposition with keys and derived state. Examples cover lists, grids, navigation, and theming.

When to use it

• Building new Android screens using a declarative UI with Jetpack Compose
• Managing UI state that must survive recomposition or configuration changes
• Connecting UI to ViewModel StateFlow or other reactive state holders
• Optimizing list and grid performance with stable keys and derivedStateOf
• Implementing navigation with Navigation Compose and Material 3 theming

Best practices

• Hoist state so composables remain stateless and reusable; pass events upward
• Prefer rememberSaveable for state that must survive configuration changes
• Use derivedStateOf for expensive, derived computations to avoid unnecessary work
• Use keys in Lazy lists/grids for stable item identity and efficient recomposition
• Run side effects in LaunchedEffect/DisposableEffect and avoid side effects during composition

Example use cases

• A search screen that keeps query across rotations using rememberSaveable
• A list screen that filters items with derivedStateOf and displays them in a LazyColumn with stable keys
• Form components where inputs are stateless composables and parent hoists state to a ViewModel
• A profile screen that loads data once via LaunchedEffect and subscribes to a ViewModel StateFlow
• A product grid using LazyVerticalGrid and adaptive columns styled with Material 3 theme values