# Compose UI

Best practices for building UI with Jetpack Compose, focusing on state hoisting...

- Repository: https://github.com/new-silvermoon/awesome-android-agent-skills (998 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-07-27
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add new-silvermoon/awesome-android-agent-skills --skill compose-ui -g -a claude-code -y`
Codex: `npx skills add new-silvermoon/awesome-android-agent-skills --skill compose-ui -g -a codex -y`
Cursor: `npx skills add new-silvermoon/awesome-android-agent-skills --skill compose-ui -g -a cursor -y`
Gemini CLI: `npx skills add new-silvermoon/awesome-android-agent-skills --skill compose-ui -g -a gemini-cli -y`

## Description

Best practices for building UI with Jetpack Compose, focusing on state hoisting, detailed performance optimizations, and theming. Use this when writing or refactoring Composable functions.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Jetpack Compose Best Practices

## Instructions

Follow these guidelines to create performant, reusable, and testable Composables.

### 1. State Hoisting (Unidirectional Data Flow)
Make Composables **stateless** whenever possible by moving state to the caller.

*   **Pattern**: Function signature should usually look like:
    ```kotlin
    @Composable
    fun MyComponent(
        value: String,              // State flows down
        onValueChange: (String) -> Unit, // Events flow up
        modifier: Modifier = Modifier // Standard modifier parameter
    )
    ```
*   **Benefit**: Decouples the UI from simple state storage, making it easier to preview and test.
*   **ViewModel Integration**: The screen-level Composable retrieves state from the ViewModel (`viewModel.uiState.collectAsStateWithLifecycle()`) and passes it down.

### 2. Modifiers
*   **Default Parameter**: Always provide a `modifier: Modifier = Modifier` as the first optional parameter.
*   **Application**: Apply this `modifier` to the *root* layout element of your Composable.
*   **Ordering matters**: `padding().clickable()` is different from `clickable().padding()`. Generally apply layout-affecting modifiers (like padding) *after* click listeners if you want the padding to be clickable.

### 3. Performance Optimization
*   **`remember`**: Use `remember { ... }` to cache expensive calculations across recompositions.
*   **`derivedStateOf`**: Use `derivedStateOf { ... }` when a state changes frequently (like scroll position) but the UI only needs to react to a threshold or summary (e.g., show "Jump to Top" button). This prevents unnecessary recompositions.
    ```kotlin
    val showButton by remember {
        derivedStateOf { listState.firstVisibleItemIndex > 0 }
    }
    ```
*   **Lambda Stability**: Prefer method references (e.g., `viewModel::onEvent`) or remembered lambdas to prevent unstable types from triggering recomposition of children.

The rest: https://github.com/new-silvermoon/awesome-android-agent-skills/blob/HEAD/.github/skills/ui/compose-ui/SKILL.md