Agent skill

Jetpack Compose and Multiplatform Expert

by rcosteira79 in rcosteira79/android-skills

Guides writing correct, performant Compose and Compose Multiplatform UI across Android, desktop, iOS and web, from state and animation to design-to-code and crash fixes.

MITAuto-check passedMobile

Install Jetpack Compose and Multiplatform Expert

skills CLI
$ npx skills add rcosteira79/android-skills --skill compose -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install rcosteira79/android-skills compose --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/rcosteira79/android-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/android-skills/skills/compose .claude/skills/compose && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
compose
GitHub stars
150
Token cost
~2.6k tokens
SKILL.md length
737 words
Files
22 (incl. references)
Skills in repo
21
Repo updated
First seen
Licence
MIT

At a glance

Guides writing correct, performant Compose and Compose Multiplatform UI across Android, desktop, iOS and web, from state and animation to design-to-code and crash fixes.

  • Works in 5 steps: Understand the request → Analyze the design (if visual reference… → Consult the right reference → …
  • Fixing a slow or over-recomposing Compose screen
  • SKILL.md covers Workflow, Key Principles, Source Code Verification and Authoritative Docs
  • Calls gh; reaches raw.githubusercontent.com and android.googlesource.com

What it does

The agent first works out which Compose layer is involved (runtime, UI, foundation, Material3 or navigation), whether the problem is state, layout, performance or architecture, and whether the code is Android-only or multiplatform. When you share a Figma frame or screenshot, it decomposes the design into a composable tree, transcribes copy and values exactly, and maps colors and spacing to MaterialTheme tokens and CompositionLocals.

Advice is grounded in reference files that are read before answering, covering state management, side effects, modifiers, lists and scrolling, animation, navigation, accessibility, focus handling for D-pad and TV remotes, performance, platform specifics, deprecated patterns and a production crash playbook. The guidance is described as non-opinionated and based on analysis of the androidx and JetBrains Compose source code.

When your agent uses it

  • Fixing a slow or over-recomposing Compose screen
  • Building a Compose screen from a Figma design or screenshot
  • Sharing UI code between Android and iOS with Compose Multiplatform
  • Working out why a LaunchedEffect or remember call misbehaves

Example prompts

  • “My Compose screen janks when scrolling a LazyColumn. Find the recomposition problem.”
  • “Implement this Figma login screen in Compose using our MaterialTheme tokens.”
  • “Move this screen into commonMain and show me what needs expect/actual.”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Understand the request
  2. Analyze the design (if visual reference provided)
  3. Consult the right reference
  4. Apply and verify
  5. Cite the source

What it can do on your machine

Read from SKILL.md and the folder at commit 0f9af5a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • gh

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • raw.githubusercontent.com
    • android.googlesource.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Jetpack Compose and Multiplatform Expert loads about 2.6k tokens when it runs, and up to ~41k if it reads all its reference files. Until then it costs about 238 tokens; SKILL.md has 737 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~238
When it runs · the whole SKILL.md, loaded when a task matches
~2.6k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~41k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from rcosteira79/android-skills at commit 0f9af5a, republished under its MIT licence (© rcosteira79). 737 words, ~2,555 tokens.

Download SKILL.mdSave it as .claude/skills/compose/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.
name
compose
description
Compose and Compose Multiplatform expert for UI development across Android, Desktop, iOS, and Web. Covers state management, composition, animations, navigation, performance, design-to-code workflows, and production crash patterns, backed by source analysis from androidx/androidx and JetBrains/compose-multiplatform-core. Use whenever the user mentions Compose, @Composable, remember, LaunchedEffect, Scaffold, NavHost, NavDisplay, MaterialTheme, LazyColumn, Modifier, recomposition, Compose Multiplatform/CMP, commonMain, expect/actual, ComposeUIViewController, UIKitView, ComposeViewport, Res.drawable/Res.string, or any Compose API. Also trigger on phrases like "design to compose", "build this UI", "implement this design", or any modern Kotlin UI question — including casual mentions like "my compose screen is slow". Plus focus topics: FocusRequester, focusProperties, onPreviewKeyEvent, D-pad, TV remote, ChromeOS, androidx.tv.material3.

Compose Expert Skill

Non-opinionated, practical guidance for writing correct, performant Compose code — across Android, Desktop, iOS, and Web. Covers Jetpack Compose and Compose Multiplatform. Backed by analysis of actual source code from androidx/androidx and JetBrains/compose-multiplatform-core.

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?
  • Is this Android-only or Compose Multiplatform (CMP)?
2. Analyze the design (if visual reference provided)
  • If the user shares a Figma frame, screenshot, or design spec, consult references/design-to-compose.md
  • Decompose the design into a composable tree
  • Transcribe, don't adapt — copy, casing, punctuation and number format come across exactly; resolve each value to the token that matches it exactly, and add a token the theme lacks rather than substituting the nearest (references/design-to-compose.md)
  • Map design tokens to MaterialTheme, spacing to CompositionLocals
  • Identify animation needs — references/animation.md (contentKey, phase rule, M3 motion tokens), references/animation-recipes.md (shimmer/loading-crossfade + choreography), or references/animation-advanced.md (shared-element, predictive back, drawBehind-for-color)
3. Consult the right reference

Read the relevant reference file(s) from references/ before answering:

TopicReference File
State-hoisting boundary (UI-value-drives-business-logic), derivedStateOf-capture trap, cross-phase back-writing, durable-state-over-events, @ReadOnlyComposablereferences/state-management.md
Slot / content-API authoring — receiver scopes (RowScope), optional (nullable) slots, XxxDefaults, slot-vs-boolean-flagreferences/view-composition.md
Screen/content split (private content composable), framework-state-stays-in-UI (not hoisted to the ViewModel)references/screen-structure.md
Modifier-as-API-contract rules (no hardcoded placement on a reusable root, caller-modifier-first) + chain orderingreferences/modifiers.md
Effects (LaunchedEffect/DisposableEffect/SideEffect), lifecycle effects (LifecycleResumeEffect), effect anti-patternsreferences/side-effects.md
compositionLocalOf vs staticCompositionLocalOf (recomposition scope), custom locals, no-mutable-State-in-a-localreferences/composition-locals.md
LazyList perf traps — indexOf()-O(n²), no-new-objects-in-key, animateItem, ReportDrawnWhen, infinite-scroll triggerreferences/lists-scrolling.md
Navigation 3 (NavDisplay, back-stack-as-state, compose-shape guardrails); type-safe @Serializable routesreferences/navigation.md
AnimatedContent contentKey-on-shape, defer-reads-to-latest-phase (lambda modifiers), M3 motion/easing tokensreferences/animation.md
Animation recipes (shimmer/loading-crossfade), sequential/parallel/staggered choreographyreferences/animation-recipes.md
Shared-element transitions (sharedBounds/sharedElement/skipToLookaheadSize), drawBehind-for-animated-color, predictive backreferences/animation-advanced.md
Extending the theme beyond M3's three slots — custom design tokens via CompositionLocalreferences/theming-material3.md
Touch targets, spacing, canonical layouts, foldables, M3 compliance auditandroid-skills:android-ux
Recomposition skipping, stability, baseline profiles, benchmarkingreferences/performance.md
Traversal order (traversalIndex / isTraversalGroup), live-region mode (Polite vs Assertive)references/accessibility.md
FocusRequester, focusable(), focusProperties, key events, D-pad, TV, keyboard, focus restorationreferences/focus-navigation.md
Removed/replaced APIs, migration paths from older Compose versionsreferences/deprecated-patterns.md
Styles API (experimental): Style {}, MutableStyleState, Modifier.styleable()references/styles-experimental.md
Transcribing a design — exact copy/casing/number format, exact-token-vs-near-neighbour, missing-token-added-not-substituted, export-over-render as source of truth; Figma dropShadow/innerShadow (1.9+, chain placement), spacing/elevation design-token CompositionLocalreferences/design-to-compose.md
Production crash patterns, defensive coding, state/performance rulesreferences/production-crash-playbook.md
CMP gotchas (collectAsState-in-commonMain, commonMain @Preview package, Lottie→Kottie, compiler-stability-non-JVM) + Android-only→CMP migrationreferences/multiplatform.md
Desktop (Window, Tray, MenuBar), iOS (UIKitView), Web (ComposeViewport)references/platform-specifics.md
4. 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
Show full SKILL.md (300 more words)Show less
5. 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

  1. Compose thinks in three phases: Composition → Layout → Drawing. State reads in each phase only trigger work for that phase and later ones.

  2. Recomposition is frequent and cheap — but only if you help the compiler skip unchanged scopes. Use stable types, avoid allocations in composable bodies.

  3. Modifier order matters. Modifier.padding(16.dp).background(Color.Red) is visually different from Modifier.background(Color.Red).padding(16.dp).

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

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

  6. Compose Multiplatform shares the runtime but not the platform. UI code in commonMain is portable. Platform-specific APIs (LocalContext, BackHandler, Window) require expect/actual or conditional source sets.

Source Code Verification

Always verify against live source code — never rely on training data alone.

Tier 1 (Preferred): android-sources MCP server

When available, use the MCP tools for fast, precise lookups:

lookup_class(className: "LazyListState")
lookup_method(className: "Composer", methodName: "startRestartGroup")
search_in_source(query: "fun rememberLazyListState")
list_class_members(className: "Modifier")
get_class_hierarchy(className: "LazyListState")
find_references(className: "SnapshotState", methodName: "value")
Tier 2 (Fallback): Raw GitHub URLs

If the MCP server is unavailable, fetch source directly:

  • AndroidX: https://raw.githubusercontent.com/androidx/androidx/androidx-main/{path}
  • Directory listing: gh api repos/androidx/androidx/contents/{path}
  • CMP: https://raw.githubusercontent.com/JetBrains/compose-multiplatform-core/jb-main/{path}
  • AOSP platform: https://android.googlesource.com/platform/frameworks/base/+/refs/heads/main/{path}?format=TEXT (base64)
Two-layer approach
  1. Start with guidance — read the topic-specific reference (e.g., references/state-management.md)
  2. Verify against live source — use MCP tools or raw GitHub to confirm behavior
Source tree map
androidx/androidx (branch: androidx-main)
├── compose/runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/
├── compose/ui/ui/src/androidMain/kotlin/androidx/compose/ui/platform/
├── compose/ui/ui/src/commonMain/kotlin/androidx/compose/ui/
├── compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/
├── compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/
└── compose/navigation/navigation-compose/src/commonMain/kotlin/androidx/navigation/compose/

compose-multiplatform-core (branch: jb-main)
├── compose/ui/ui/src/desktopMain/kotlin/androidx/compose/ui/window/
├── compose/ui/ui/src/iosMain/kotlin/androidx/compose/ui/window/
├── compose/ui/ui/src/webMain/kotlin/androidx/compose/ui/window/
├── compose/ui/ui/src/skikoMain/kotlin/androidx/compose/ui/
└── compose/foundation/foundation/src/skikoMain/kotlin/androidx/compose/foundation/

compose-multiplatform (resources library)
└── components/resources/library/src/commonMain/

Authoritative Docs

For guidance, best practices, or migration guides — things source code alone can't answer — prefer Google's Android Knowledge Base over web search:

bash
android docs search "LazyColumn performance"              # ranked kb:// URLs + summaries
android docs fetch kb://android/develop/ui/compose/lists  # full content of a result

4800+ curated docs across Android, Wear, TV, KMP, and Glance. Use this when the internal files in references/ don't cover your question; use source code lookups (above) when you need implementation details rather than guidance.

© rcosteira79, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 21 other files (references) in plugins/android-skills/skills/compose of rcosteira79/android-skills.

  • SKILL.md
  • references/accessibility.md
  • references/animation-advanced.md
  • references/animation-recipes.md
  • references/animation.md
  • references/composition-locals.md
  • references/deprecated-patterns.md
  • references/design-to-compose.md
  • references/focus-navigation.md
  • references/lists-scrolling.md
  • references/modifiers.md
  • references/multiplatform.md
  • references/navigation.md
  • references/performance.md
  • references/platform-specifics.md
  • references/production-crash-playbook.md
  • references/screen-structure.md
  • references/side-effects.md
  • references/state-management.md
  • references/styles-experimental.md
  • … and 2 more

Open the folder on GitHubat commit 0f9af5a

Compare with similar skills

Jetpack Compose and Multiplatform Expert next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Jetpack Compose and Multiplatform Expert compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Jetpack Compose and Multiplatform Expert this skillrcosteira79/android-skills150—~2.6kAutomated safety check: PassMIT
Jetpack Compose Expertaldefy/compose-skill596—~4.8kAutomated safety check: PassCustom licence
Compose Multiplatform Patternsmonta-app/ocpp-emulator1795 repos~2kAutomated safety check: PassApache-2.0
Ksafeioannisa/KSafe332—~17kAutomated safety check: PassApache-2.0
KtormonitorCosminMihuMDC/KtorMonitor254—~2.5kAutomated safety check: PassApache-2.0
Compose Multiplatformericrisco/rsc-harness156—~2.7kAutomated safety check: PassMIT

Similar skills

  • Jetpack Compose Expert

    aldefy/compose-skill

    Guides Jetpack Compose and Compose Multiplatform work across Android, Desktop, iOS and web, plus Android TV, Material 3 motion, paging, navigation and design-to-code.

    596 GitHub stars~4.8k tokensUpdated 2 mo ago
    MobileAuto-check passed
  • Compose Multiplatform Patterns

    monta-app/ocpp-emulator

    Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.

    179 GitHub starsUsed in 5 repos~2k tokens
    MobileAuto-check passed
  • Ksafe

    ioannisa/KSafe

    Required before any reply that touches KSafe (by ksafe(...), ksafe.get/put, :ksafe-compose, :ksafe-biometrics), even a 'can KSafe do X?' question or a one-line change that looks like plain Kotlin.

    332 GitHub stars~17k tokensUpdated 4 days ago
    MobileAuto-check passed
  • Ktormonitor

    CosminMihuMDC/KtorMonitor

    KtorMonitor is a Kotlin Multiplatform library for real-time HTTP traffic monitoring.

    254 GitHub stars~2.5k tokensUpdated 24 days ago
    MobileAuto-check passed
  • Compose Multiplatform

    ericrisco/rsc-harness

    A skill your agent uses when building one shared Compose UI in Kotlin across Android, iOS, and desktop — commonMain @Composables, expect/actual, source-set placement, native interop, multiplatform…

    156 GitHub stars~2.7k tokensUpdated today
    MobileAuto-check passed
  • Claude Android Ninja

    Drjacky/claude-android-ninja

    Build and migrate Android apps with Kotlin, Jetpack Compose, MVVM, Hilt, Room 3 (KSP, SQLiteDriver, Flow/suspend DAOs), Navigation3, and multi-module Gradle.

    124 GitHub stars~5.2k tokensUpdated 8 days ago
    MobileAuto-check passed

More from rcosteira79/android-skills

All 21 skills in this repo
  • Kotlin Multiplatform Boundaries

    rcosteira79/android-skills

    Helps choose how common Kotlin Multiplatform code reaches platform APIs: expect/actual, a common interface with platform bindings, or separate platform screens.

    150 GitHub stars~1.5k tokensUpdated 18 days ago
    Auto-check passed
  • Android Data Layer and Room in KMP

    rcosteira79/android-skills

    Sets out the repository pattern's error-propagation model for Android and Kotlin Multiplatform, plus the Room setup for commonMain.

    150 GitHub stars~1.2k tokensUpdated 18 days ago
    Auto-check passed
  • Android Debugging

    rcosteira79/android-skills

    Android and KMP debugging techniques for crashes, ANRs, memory leaks, R8 traces, Gradle failures and Compose recomposition, built on finding the root cause first.

    150 GitHub stars~2.6k tokensUpdated 18 days ago
    Auto-check passed
  • Android and KMP Baseline

    rcosteira79/android-skills

    Sets house defaults for Android and Kotlin Multiplatform work and routes to the right specialized skill for Compose, networking, testing or build tooling.

    150 GitHub stars~3k tokensUpdated 18 days ago
    Auto-check passed
  • Android Gradle Build Logic

    rcosteira79/android-skills

    Sets up Android Gradle convention plugins in a build-logic composite build, including the version catalog wiring and shared configuration that are easy to get wrong.

    150 GitHub stars~959 tokensUpdated 18 days ago
    Auto-check passed
  • Android Retrofit

    rcosteira79/android-skills

    A skill your agent uses when setting up or working with Retrofit in Android — service interface definitions, coroutines integration, OkHttp configuration, Hilt module setup, and error handling in…

    150 GitHub stars~942 tokensUpdated 18 days ago
    Auto-check passed

Questions about Jetpack Compose and Multiplatform Expert

What does Jetpack Compose and Multiplatform Expert do?

Guides writing correct, performant Compose and Compose Multiplatform UI across Android, desktop, iOS and web, from state and animation to design-to-code and crash fixes. The agent first works out which Compose layer is involved (runtime, UI, foundation, Material3 or navigation), whether the problem is state, layout, performance or architecture, and whether the code is Android-only or multiplatform. When you share a Figma frame or screenshot, it decomposes the design into a composable tree, transcribes copy and values exactly, and maps colors and spacing to MaterialTheme tokens and CompositionLocals.

When should I use Jetpack Compose and Multiplatform Expert?

Jetpack Compose and Multiplatform Expert fits situations like: fixing a slow or over-recomposing Compose screen; building a Compose screen from a Figma design or screenshot; sharing UI code between Android and iOS with Compose Multiplatform; working out why a LaunchedEffect or remember call misbehaves.

How do I install Jetpack Compose and Multiplatform Expert in Claude Code?

Run `npx skills add rcosteira79/android-skills --skill compose -a claude-code`. Or copy the skill folder (plugins/android-skills/skills/compose in rcosteira79/android-skills) into .claude/skills/compose in your project. Claude Code loads it when a task matches its description.

How do I install Jetpack Compose and Multiplatform Expert in Codex?

Run `npx skills add rcosteira79/android-skills --skill compose -a codex`. Or copy the skill folder (plugins/android-skills/skills/compose in rcosteira79/android-skills) into .agents/skills/compose in your project. Codex loads it when a task matches its description.

Can I use Jetpack Compose and Multiplatform Expert in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add rcosteira79/android-skills --skill compose -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/compose, .gemini/skills/compose, .github/skills/compose and .opencode/skills/compose in your project.

What does Jetpack Compose and Multiplatform Expert need to run?

Going by SKILL.md and its folder, Jetpack Compose and Multiplatform Expert needs the command-line tools its instructions call (gh).

Does Jetpack Compose and Multiplatform Expert access the network?

SKILL.md names 2 domains. In commands or code: raw.githubusercontent.com and android.googlesource.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Jetpack Compose and Multiplatform Expert safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Jetpack Compose and Multiplatform Expert use?

Jetpack Compose and Multiplatform Expert is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Jetpack Compose and Multiplatform Expert use?

About 2.6k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 39k tokens, read only when the agent opens those files.

What are the alternatives to Jetpack Compose and Multiplatform Expert?

Skills that share tags, products or a category with Jetpack Compose and Multiplatform Expert: Jetpack Compose Expert (aldefy/compose-skill, 596 stars), Compose Multiplatform Patterns (monta-app/ocpp-emulator, 179 stars), Ksafe (ioannisa/KSafe, 332 stars) and Ktormonitor (CosminMihuMDC/KtorMonitor, 254 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Jetpack Compose and Multiplatform Expert?

rcosteira79 (a GitHub user) maintains it in rcosteira79/android-skills, which has 150 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on September 19, 2026.

Source: rcosteira79/android-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.