Modern Jetpack Compose
Communityanhvt52
Guides writing, reviewing, and reasoning about modern Android UI code using Jetpack Compose. Covers best practices for state management, side effects, recomposition, navigation, Material 3 design, accessibility, and performance. Use when reading, writing, or reviewing any Jetpack Compose project.
Overview
- Repository
- anhvt52/jetpack-compose-skills
- Publisher
- anhvt52
- Stars
- 100
- Forks
- 4
- Bundled files
- 14
- License
- MIT
- Updated
- Mar 12, 2026
Installation
tmp=$(mktemp -d)
git clone --depth 1 https://github.com/anhvt52/jetpack-compose-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/modern-jetpack-compose" ~/.claude/skills/modern-jetpack-compose
rm -rf "$tmp"tmp=$(mktemp -d)
git clone --depth 1 https://github.com/anhvt52/jetpack-compose-skills.git "$tmp"
mkdir -p ~/.codex/skills
cp -R "$tmp/modern-jetpack-compose" ~/.codex/skills/modern-jetpack-compose
rm -rf "$tmp"Install the Modern Jetpack Compose agent skill from https://github.com/anhvt52/jetpack-compose-skills/tree/master/modern-jetpack-compose into this project's skills folder.Instructions
Review or generate Jetpack Compose code for correctness, modern API usage, and adherence to Android best practices. Report only genuine issues — do not nitpick style unless it contradicts a clear rule.
Review / Generation Process
When reviewing existing code, follow these steps in order:
- Check for deprecated or outdated APIs →
references/api.md - Review composable structure and composition patterns →
references/composables.md - Validate state management and data flow →
references/state.md - Validate side-effect usage →
references/effects.md - Check recomposition stability →
references/recomposition.md - Validate navigation implementation →
references/navigation.md - Check Material 3 / Expressive design compliance →
references/design.md - Validate accessibility →
references/accessibility.md - Check performance →
references/performance.md - Quick Kotlin code review →
references/kotlin.md - Final code hygiene check →
references/hygiene.md
When generating new code, load the relevant reference files for the feature being built before writing any code, so output is idiomatic from the start.
For partial reviews or targeted generation, load only the relevant reference files.
Core Instructions
- Target Compose BOM 2024.x by default. Note where BOM 2025.x (Material Expressive) introduces new components or APIs.
- Use Material 3. Do not use Material 2 unless the project already uses it.
- Architecture: MVVM with unidirectional data flow (UDF). ViewModel + StateFlow for screen state. Compose UI observes state, emits events.
- Target Kotlin with modern language features (sealed interfaces, coroutines, Flow).
- Do not introduce third-party libraries without asking first.
- Each composable should live in its own file for non-trivial components.
- Organize by feature, not by technical layer (screens/home/, screens/settings/, etc.).
Output Format
Organize findings by file. For each issue:
- State the file and relevant line(s).
- Name the rule being violated.
- Show a brief before/after Kotlin snippet.
Skip files with no issues. End with a prioritized summary of the most impactful changes to make first.
Example output:
HomeScreen.kt
Line 14: Use collectAsStateWithLifecycle() instead of collectAsState().
// Before
val uiState by viewModel.uiState.collectAsState()
// After
val uiState by viewModel.uiState.collectAsStateWithLifecycle()Line 42: Provide key in LazyColumn for stable item identity.
// Before
LazyColumn {
items(books) { book ->
BookItem(book)
}
}
// After
LazyColumn {
items(books, key = { it.id }) { book ->
BookItem(book)
}
}Line 67: Image missing contentDescription — required for accessibility.
// Before
Image(painter = painterResource(R.drawable.cover), contentDescription = null)
// After — if decorative:
Image(painter = painterResource(R.drawable.cover), contentDescription = null) // OK if truly decorative
// After — if meaningful:
Image(
painter = painterResource(R.drawable.cover),
contentDescription = stringResource(R.string.book_cover_description)
)Summary
- State (high):
collectAsState()on line 14 does not respect lifecycle — replace withcollectAsStateWithLifecycle(). - Performance (medium): Missing
keyinLazyColumnon line 42 causes unnecessary recomposition. - Accessibility (medium): Image on line 67 needs a meaningful
contentDescription.
References
references/api.md— deprecated APIs and their modern replacements.references/composables.md— composable structure, naming, and composition patterns.references/state.md— state management, ViewModel, StateFlow, and data flow.references/effects.md— side effects: LaunchedEffect, DisposableEffect, SideEffect.references/recomposition.md— recomposition stability, @Stable/@Immutable, derivedStateOf.references/navigation.md— Navigation Compose, type-safe nav, nested graphs.references/design.md— Material 3 / Expressive theming, adaptive layouts.references/accessibility.md— TalkBack, semantics, content descriptions, touch targets.references/performance.md— LazyList optimization, remember, scope of state reads.references/kotlin.md— modern Kotlin patterns for Android.references/hygiene.md— code hygiene, testing, lint.
Bundled files
agents/.gitkeep0 Bagents/openai.yaml371 Breferences/.gitkeep0 Breferences/accessibility.md4 KBreferences/api.md4 KBreferences/composables.md4 KBreferences/design.md4 KBreferences/effects.md5 KBreferences/hygiene.md3 KBreferences/kotlin.md3 KBreferences/navigation.md4 KBreferences/performance.md3 KBreferences/recomposition.md5 KBreferences/state.md4 KB
FAQ
What does Modern Jetpack Compose do?
Guides writing, reviewing, and reasoning about modern Android UI code using Jetpack Compose. Covers best practices for state management, side effects, recomposition, navigation, Material 3 design, accessibility, and performance. Use when reading, writing, or reviewing any Jetpack Compose project.
Who made Modern Jetpack Compose?
anhvt52 (a community member) publishes it in the anhvt52/jetpack-compose-skills repository on GitHub.
Is Modern Jetpack Compose free?
Yes. Modern Jetpack Compose is open source, published by anhvt52 under the MIT license.
What comes with Modern Jetpack Compose?
Its instructions and 14 files the agent reads only when a task needs them, such as references, examples or scripts.
Which agents can use Modern Jetpack Compose?
Any coding agent that reads SKILL.md files, including Claude Code, Codex, Cursor, GitHub Copilot and Gemini CLI. The agent loads the skill when a task matches its description.
What are agent skills?
An agent skill is a folder with a SKILL.md file: instructions that teach a coding agent how to do one kind of task, and optionally files it can read while it works. The agent keeps only the skill's name and description in mind and reads the rest when a task calls for it.
How are agent skills different from MCP servers?
An MCP server gives an agent new tools to call, code that runs somewhere and returns results. A skill gives it knowledge: how to approach a task with the tools it already has. Many agents use both.
How can my agent test my Android app?
Robomori lets coding agents create, start and control Android emulators and devices from one command, so they can install your app, take screenshots and check dark mode, font sizes and languages.