compose-ui

Q: How do I install compose-ui?

Run npx skills add https://github.com/new-silvermoon/awesome-android-agent-skills --skill compose-ui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/compose-ui/ (personal) or .claude/skills/compose-ui/ (project).

by new-silvermoonFrontend & Design

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.

Installs: 736
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

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

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads compose-ui automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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.

FAQ

What does the compose-ui skill do?

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.

How do I install compose-ui?

Run npx skills add https://github.com/new-silvermoon/awesome-android-agent-skills --skill compose-ui in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/compose-ui/ (personal) or .claude/skills/compose-ui/ (project).

Which AI agents can use compose-ui?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is compose-ui safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains compose-ui?

It is published by new-silvermoon in new-silvermoon/awesome-android-agent-skills. It has 736 recorded installs.