# Android Compose

> Build high-performance declarative UI with Jetpack Compose. Use when writing Composable functions, optimizing recomposition, hoisting state, or working with LazyColumn and side effects; defer deep-link and navigation routing to android-navigation.

- Skill: `hoangnguyen0403/android-compose` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds add hoangnguyen0403/android-compose`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangnguyen0403/android-compose/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: HoangNguyen0403 (https://skillmd.com/u/hoangnguyen0403)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/hoangnguyen0403/android-compose

---

# Jetpack Compose Expert

## **Priority: P0 (CRITICAL)**

**Role**: Android UI Performance Expert. Prioritize frame stability and state management.

## 1. Hoist State Correctly

- **Screen** (Stateful) -> **Content** (Stateless).
- Pass lambdas down (`onItemClick: (Id) -> Unit`).
- NEVER pass ViewModel to stateless composables.
- Use `MaterialTheme.colorScheme`, no hardcoded hex.

See [implementation examples](references/implementation.md) for state hoisting patterns.

## 2. Optimize Recomposition

- Annotate params with `@Stable` or `@Immutable`.
- Use `key` in `LazyColumn` items for stable identity.
- Reuse or make Modifiers static where possible.
- Use `derivedStateOf` for frequently updating derived values.

See [implementation examples](references/implementation.md) for `derivedStateOf` usage.

## 3. Handle Side Effects Properly

- Use `LaunchedEffect` for one-shot or keyed side effects — never run side effects in composition body.
- Move complex calculations to ViewModel or `remember`.

## Anti-Patterns

- **No Side Effects in Composition Body**: Use `LaunchedEffect`, not raw coroutines.
- **No VM Deep Pass**: Hoist state; pass only data/callbacks.
- **No Heavy Computation in Composables**: Offload to ViewModel or `remember`.

## Verification

- [ ] All stateless Composables have `@Preview`.
- [ ] `LazyColumn` items use `key` parameter.
- [ ] No ViewModel passed below Screen-level Composables.
- [ ] `./gradlew build` succeeds.

## References

- [Optimization Patterns](references/implementation.md)

## Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:
- hoist