jetpack-compose
Provides expert, code-based guidance for building and debugging Jetpack Compose UIs in Android.
Install
mkdir -p .claude/skills/jetpack-compose && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18431" && unzip -o skill.zip -d .claude/skills/jetpack-compose && rm skill.zipInstalls to .claude/skills/jetpack-compose
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Jetpack Compose expert skill for Android UI development. Guides state management decisions (@Composable, remember, mutableStateOf, derivedStateOf, State hoisting), view composition and structure, Modifier chains, lazy lists, navigation, animation, side effects, theming, accessibility, and performance optimization. Backed by actual androidx source code analysis. Use this skill whenever the user mentions Compose, @Composable, remember, LaunchedEffect, Scaffold, NavHost, MaterialTheme, LazyColumn, Modifier, recomposition, Style, styleable, MutableStyleState, or any Jetpack Compose API. Also trigger when the user says "Android UI", "Kotlin UI", "compose layout", "compose navigation", "compose animation", "material3", "compose styles", "styles api", or asks about modern Android development patterns. Even casual mentions like "my compose screen is slow" or "how do I pass data between screens" should trigger this skill.Key capabilities
- →Guide state management decisions in Jetpack Compose
- →Structure view composition and layout
- →Explain Modifier chains and custom modifiers
- →Manage side effects with `LaunchedEffect`, `DisposableEffect`, `SideEffect`
- →Implement navigation with `NavHost` and type-safe routes
- →Optimize performance through recomposition skipping and stability
How it works
The skill provides non-opinionated guidance for Jetpack Compose development by consulting relevant reference files and analyzing `androidx` source code. It focuses on real pitfalls and suggests minimal correct solutions.
Inputs & outputs
When to use jetpack-compose
- →Debug slow UI recompositions
- →Implement state hoisting patterns
- →Optimize complex animation chains
- →Structure multi-screen navigation
About this skill
Jetpack Compose Expert Skill
Non-opinionated, practical guidance for writing correct, performant Jetpack Compose code.
Focuses on real pitfalls developers encounter daily, backed by analysis of the actual
androidx/androidx source code (branch: androidx-main).
Workflow
When helping with Compose code, follow this checklist:
1. Understand the request
- What Compose layer is involved? (Runtime, UI, Foundation, Material3, Navigation)
- Is this a state problem, layout problem, performance problem, or architecture question?
2. Consult the right reference
Read the relevant reference file(s) from references/ before answering:
| Topic | Reference File |
|---|---|
@State, remember, mutableStateOf, state hoisting, derivedStateOf, snapshotFlow | references/state-management.md |
| Structuring composables, slots, extraction, preview | references/view-composition.md |
Modifier ordering, custom modifiers, Modifier.Node | references/modifiers.md |
LaunchedEffect, DisposableEffect, SideEffect, rememberCoroutineScope | references/side-effects.md |
CompositionLocal, LocalContext, LocalDensity, custom locals | references/composition-locals.md |
LazyColumn, LazyRow, LazyGrid, Pager, keys, content types | references/lists-scrolling.md |
NavHost, type-safe routes, deep links, shared element transitions | references/navigation.md |
animate*AsState, AnimatedVisibility, Crossfade, transitions | references/animation.md |
MaterialTheme, ColorScheme, dynamic color, Typography, shapes | references/theming-material3.md |
| Recomposition skipping, stability, baseline profiles, benchmarking | references/performance.md |
| Semantics, content descriptions, traversal order, testing | references/accessibility.md |
| Removed/replaced APIs, migration paths from older Compose versions | references/deprecated-patterns.md |
Styles API (experimental): Style {}, MutableStyleState, Modifier.styleable() | references/styles-experimental.md |
3. Apply and verify
- Write code that follows the patterns in the reference
- Flag any anti-patterns you see in the user's existing code
- Suggest the minimal correct solution — don't over-engineer
4. Cite the source
When referencing Compose internals, point to the exact source file:
// See: compose/runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/Composer.kt
Key Principles
-
Compose thinks in three phases: Composition → Layout → Drawing. State reads in each phase only trigger work for that phase and later ones.
-
Recomposition is frequent and cheap — but only if you help the compiler skip unchanged scopes. Use stable types, avoid allocations in composable bodies.
-
Modifier order matters.
Modifier.padding(16.dp).background(Color.Red)is visually different fromModifier.background(Color.Red).padding(16.dp). -
State should live as low as possible and be hoisted only as high as needed. Don't put everything in a ViewModel just because you can.
-
Side effects exist to bridge Compose's declarative world with imperative APIs. Use the right one for the job — misusing them causes bugs that are hard to trace.
Source Code Receipts
Beyond the guidance docs, this skill bundles the actual source code from
androidx/androidx (branch: androidx-main). When you need to verify how something
works internally, or the user asks "show me the actual implementation", read
the raw source from references/source-code/:
| Module | Source Reference | Key Files Inside |
|---|---|---|
| Runtime | references/source-code/runtime-source.md | Composer.kt, Recomposer.kt, State.kt, Effects.kt, CompositionLocal.kt, Remember.kt, SlotTable.kt, Snapshot.kt |
| UI | references/source-code/ui-source.md | AndroidCompositionLocals.android.kt, Modifier.kt, Layout.kt, LayoutNode.kt, ModifierNodeElement.kt, DrawModifier.kt |
| Foundation | references/source-code/foundation-source.md | LazyList.kt, LazyGrid.kt, BasicTextField.kt, Clickable.kt, Scrollable.kt, Pager.kt |
| Material3 | references/source-code/material3-source.md | MaterialTheme.kt, ColorScheme.kt, Button.kt, Scaffold.kt, TextField.kt, NavigationBar.kt |
| Navigation | references/source-code/navigation-source.md | NavHost.kt, ComposeNavigator.kt, NavGraphBuilder.kt, DialogNavigator.kt |
Two-layer approach
- Start with guidance — read the topic-specific reference (e.g.,
references/state-management.md) - Go deeper with source — if the user wants receipts or you need to verify, read from
references/source-code/
Source tree map
compose/
├── runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/
├── ui/ui/src/androidMain/kotlin/androidx/compose/ui/platform/
├── ui/ui/src/commonMain/kotlin/androidx/compose/ui/
├── foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/
├── material3/material3/src/commonMain/kotlin/androidx/compose/material3/
└── navigation/navigation-compose/src/commonMain/kotlin/androidx/navigation/compose/
When not to use it
- →When the user is not working with Jetpack Compose APIs.
- →When the user is asking about older Android development patterns not related to Compose.
Limitations
- →The skill is focused on Jetpack Compose APIs and related Android UI development.
- →The skill's guidance is backed by analysis of the `androidx/androidx` source code.
- →The skill provides non-opinionated guidance.
How it compares
This skill offers practical, source-code-backed guidance for Jetpack Compose, addressing common pitfalls and internal workings, unlike generic documentation or tutorials.
Compared to similar skills
jetpack-compose side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| jetpack-compose (this skill) | 0 | 4mo | No flags | Advanced |
| android-kotlin | 7 | 3mo | No flags | Intermediate |
| reviewing-changes | 1 | 2mo | No flags | Intermediate |
| kmp-cmp-app-builder | 0 | 4mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
android-kotlin
alinaqi
Android Kotlin development with Coroutines, Jetpack Compose, Hilt, and MockK testing
reviewing-changes
bitwarden
Guides Android code reviews with type-specific checklists and MVVM/Compose pattern validation. Use when reviewing Android PRs, pull requests, diffs, or local changes involving Kotlin, ViewModel, Composable, Repository, or Gradle files. Triggered by "review PR", "review changes", "check this code", "Android review", or code review requests mentioning bitwarden/android. Loads specialized checklists for feature additions, bug fixes, UI refinements, refactoring, dependency updates, and infrastructure changes.
kmp-cmp-app-builder
firdaus1453
>
Android Navigation
li-lance
Standards for Jetpack Navigation Compose (Type-safe)
using-chrisbanes-skills
chrisbanes
Use when a Kotlin, Android, or Jetpack Compose task is too broad for any single focused skill to obviously apply, especially for general review, refactor, architecture, state, performance, testing, or UI API design work.
compose-skill
tajemniktv
>