Sandbox
@anhvt52/jetpack-compose-skills

Jetpack Compose skill pack for Claude Code and Cursor

This repo packages a skill for modern Android UI work with Jetpack Compose. It helps agents generate Compose code, review existing screens, and avoid stale APIs and common state bugs. The repo centers on a skill file plus reference docs for API, state, recomposition, navigation, design, accessibility, performance, and Kotlin patterns.

96 stars4 forksUpdated 6mo ago
Who it's for

Builders who want their coding agent to write and review Jetpack Compose UI with current patterns.

What it delivers

You can get more idiomatic Compose code and catch outdated patterns before they ship.

What it does

Compose best-practice reference

Covers modern API choices, Material 3, accompanist migrations, and other stale Compose patterns.

State and effect guidance

Explains MVVM, UDF, ViewModel and StateFlow use, and when to use `remember`, `LaunchedEffect`, or `DisposableEffect`.

Recomposition and performance checks

Calls out unstable data, lambda stability, lazy list keys, and deferred state reads that affect redraws.

Navigation and architecture guidance

Includes type-safe Navigation Compose patterns, nested graphs, back stack scoped ViewModels, and deep links.

Accessibility and design checks

Covers TalkBack, semantics, touch targets, contrast, Material 3 theming, dynamic color, and adaptive layouts.

Review-oriented output

The skill is set up to return file-by-file findings with rule names, line numbers, and before/after Kotlin snippets.

How to get it

  1. 1Run
    npx skills add https://github.com/anhvt52/jetpack-compose-skills
  2. 2This installs the skill for all detected agents on your machine. You can also scope it
    # Project-level only
    npx skills add https://github.com/anhvt52/jetpack-compose-skills
    
    # Global (all your projects)
    npx skills add https://github.com/anhvt52/jetpack-compose-skills -g
  3. 3If npx is unavailable, install Node.js first
    brew install node
  4. 4Clone the repo and add to your project's CLAUDE.md
    Use the skill at: path/to/modern-jetpack-compose/SKILL.md

README

Modern Jetpack Compose — Agent Skill

An agent skill for writing, reviewing, and reasoning about modern Android UI code using Jetpack Compose. Compatible with Claude Code, Cursor, Codex, and any platform that supports the Agent Skills format.

Claude Code Cursor Codex Gemini


Why This Skill?

LLMs frequently generate outdated or incorrect Jetpack Compose code. Common problems:

  • Wrong state collection — using collectAsState() instead of collectAsStateWithLifecycle()
  • Unstable recomposition — passing unstable lambdas or undecorated data classes that cause unnecessary redraws
  • Ignored Scaffold padding — forgetting to apply paddingValues from Scaffold's content lambda, causing content to render under system bars
  • Stale APIs — referencing accompanist libraries that have since been upstreamed into Compose, or Material 2 APIs that have Material 3 equivalents
  • Architecture drift — mixing state hoisting patterns or bypassing the UDF model

This skill gives your AI agent a curated, up-to-date reference for all of these areas so it generates correct, idiomatic Compose code from the start.


What It Does

Load this skill to give your AI agent deep knowledge of modern Jetpack Compose best practices. It helps agents:

  • Generate idiomatic Compose code from scratch
  • Review existing code for deprecated APIs, anti-patterns, and accessibility gaps
  • Guide architecture decisions around state management, navigation, and performance

Skill Coverage

Reference FileTopics Covered
api.mdDeprecated APIs → modern replacements, Material 2 → 3, accompanist migrations
composables.mdNaming conventions, state hoisting, slot APIs, @Preview, modifier contract
state.mdMVVM + UDF, ViewModel + StateFlow, remember vs rememberSaveable, derivedStateOf
effects.mdLaunchedEffect, DisposableEffect, SideEffect, rememberCoroutineScope
recomposition.md@Stable/@Immutable, unstable collections, key() in lazy lists, lambda stability
navigation.mdType-safe Navigation Compose, nested graphs, BackStack-scoped ViewModels, deep links
design.mdMaterial 3 theming, dynamic color, adaptive layouts, Material Expressive (BOM 2025.x)
accessibility.mdTalkBack, semantics, mergeDescendants, touch targets, color contrast
performance.mdLazyList optimization, remember, deferred state reads, graphicsLayer
kotlin.mdSealed interfaces, coroutines, stateIn, null safety, when expressions
hygiene.mdTesting with ComposeTestRule, lint/detekt, secrets, resource naming

Installation

Recommended — npx (Claude Code, Cursor, Codex, Gemini)

npx skills add https://github.com/anhvt52/jetpack-compose-skills

This installs the skill for all detected agents on your machine. You can also scope it:

# Project-level only
npx skills add https://github.com/anhvt52/jetpack-compose-skills

# Global (all your projects)
npx skills add https://github.com/anhvt52/jetpack-compose-skills -g

If npx is unavailable, install Node.js first:

brew install node

Manual — Claude Code

Clone the repo and add to your project's CLAUDE.md:

Use the skill at: path/to/modern-jetpack-compose/SKILL.md

Manual — Cursor / Codex / OpenAI-compatible platforms

Use the config at modern-jetpack-compose/agents/openai.yaml.


Target Platform

  • Compose BOM: 2024.x (stable default), with notes for 2025.x (Material Expressive)
  • Material Design: Material 3
  • Architecture: MVVM + Unidirectional Data Flow (UDF)
  • Language: Kotlin with coroutines, Flow, and sealed interfaces

Example Usage

Reviewing code:

"Using the modern-jetpack-compose skill, review the files in feature/home/ for best practices issues."

Generating code:

"Using the modern-jetpack-compose skill, write a BookListScreen with a LazyColumn, search bar, and empty state, backed by a ViewModel."

Targeted check:

"Using references/accessibility.md from the modern-jetpack-compose skill, check all composables in components/ for accessibility issues."


Output Format

The skill organizes findings by file. Each issue includes:

  1. File and line number
  2. Rule being violated
  3. Before/after Kotlin snippet

Results end with a prioritized summary of the most impactful changes.


License

MIT — see LICENSE.

Author

Anh Vu — anhvt52@gmail.com

Contributing

See CONTRIBUTING.md.

Files in the repo

Repository payload4 top-level entries
  • modern-jetpack-compose
  • CONTRIBUTING.md
  • LICENSE
  • README.md

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More skills

obra/
superpowers

An agentic skills framework & software development methodology that works.

285k
1 add

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.

117k
1 add
Vincentwei1021/
anything2explainer

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666

Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

71k