Compose UI Agent Skill

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.

675 tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

910

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/new-silvermoon/awesome-android-agent-skills --skill compose-ui

The instruction itself

7 sections, as written by the author

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:

    @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.

    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.

4. Theming and Resources

Use MaterialTheme.colorScheme and MaterialTheme.typography instead of hardcoded colors or text styles.
Organize simple UI components into specific files (e.g., DesignSystem.kt or Components.kt) if they are shared across features.

5. Previews

Create a private preview function for every public Composable.
Use @Preview(showBackground = true) and include Light/Dark mode previews if applicable.
Pass dummy data (static) to the stateless Composable for the preview.

Other skills for the same job

different authors, same section of the catalogue

Karpathy Guidelines

by hyyhf

×3

Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions, and define verifiable success criteria.

Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work.

4k tokens

Modern Javascript Patterns

by ComeOnOliver

×2

Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.

9k tokens

Modern Javascript Patterns

by ComeOnOliver

×2

8k tokens

Contributor Pr Description

by flutter

vendor ×1

Guidelines and format for writing pull request descriptions in this repository. Use this skill whenever the user asks you to draft a pull request description, submit a PR, or update a PR description.

697 tokens

Angular Best Practices

by lingxling

×1

Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.

Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions. Uses `gh` to inspect checks and logs, summarize failure context, draft a fix plan, and implement only after explicit approval. Treats external providers (for example Buildkite) as out of scope and reports only the details URL. Do NOT use for addressing PR review comments (use gh-address-comments) or general CI outside GitHub Actions.

7k tokens scripts

Angular Best Practices

by ComeOnOliver

×1

Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.

6k tokens

How to use it

Copy the folder

Take new-silvermoon/compose-ui from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.