Skip to content
Development
Skill

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

From plugin
agent-skills-standard
538200 skills1 MCP
Install
$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill android-compose --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/android-compose

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

android-compose.SKILL.md
name: android-compose
description: 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.
metadata:
  triggers:
    files:
    - '**/*Screen.kt'
    - '**/*Composable*.kt'
    - '**/*Content.kt'
    keywords:
    - "@Composable"
    - Modifier
    - Column
    - Row
    - LazyColumn
    - setContent
    - recompose
    - remember
    - derivedStateOf
    - LaunchedEffect

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
Read more
Ships withagent-skills-standard

The portable SDLC standards layer for AI coding agents. Sync once, then work in your own runtime.

Get the whole plugin

Other skills on agent-skills-standard.