Compose
Communityrcosteira79
Compose and Compose Multiplatform expert for UI development across Android, Desktop, iOS, and Web. Covers state management, composition, animations, navigation, performance, and design-to-code workflows, 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.
Overview
- Repository
- rcosteira79/android-skills
- Publisher
- rcosteira79
- Stars
- 174
- Forks
- 21
- Bundled files
- 19
- License
- MIT
- Updated
- Nov 10, 2026
Installation
tmp=$(mktemp -d)
git clone --depth 1 https://github.com/rcosteira79/android-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/android-skills/skills/compose" ~/.claude/skills/compose
rm -rf "$tmp"tmp=$(mktemp -d)
git clone --depth 1 https://github.com/rcosteira79/android-skills.git "$tmp"
mkdir -p ~/.codex/skills
cp -R "$tmp/plugins/android-skills/skills/compose" ~/.codex/skills/compose
rm -rf "$tmp"Install the Compose agent skill from https://github.com/rcosteira79/android-skills/tree/main/plugins/android-skills/skills/compose into this project's skills folder.Instructions
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. 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), orreferences/animation-advanced.md(shared-element, predictive back,drawBehind-for-color)
2. Consult the right reference
Read the relevant reference file(s) from references/ before answering:
| Topic | Reference File |
|---|---|
State-hoisting boundary (UI-value-drives-business-logic), derivedStateOf-capture trap, cross-phase back-writing, durable-state-over-events, @ReadOnlyComposable |
references/state-management.md |
Slot / content-API authoring — receiver scopes (RowScope), optional (nullable) slots, XxxDefaults, slot-vs-boolean-flag |
references/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 ordering | references/modifiers.md |
Effects (LaunchedEffect/DisposableEffect/SideEffect), lifecycle effects (LifecycleResumeEffect), effect anti-patterns |
references/side-effects.md |
compositionLocalOf vs staticCompositionLocalOf (recomposition scope), custom locals, no-mutable-State-in-a-local |
references/composition-locals.md |
LazyList traps — indexOf()-O(n²), duplicate-key and per-item-rememberSaveable crashes, no-new-objects-in-key, animateItem, ReportDrawnWhen, infinite-scroll trigger, impression logging |
references/lists-scrolling.md |
Navigation 3 (NavDisplay, back-stack-as-state, compose-shape guardrails); type-safe @Serializable routes |
references/navigation.md |
AnimatedContent contentKey-on-shape, defer-reads-to-latest-phase (lambda modifiers), M3 motion/easing tokens |
references/animation.md |
| Animation recipes (shimmer/loading-crossfade), sequential/parallel/staggered choreography | references/animation-recipes.md |
Shared-element transitions (sharedBounds/sharedElement/skipToLookaheadSize), drawBehind-for-animated-color, predictive back |
references/animation-advanced.md |
Extending the theme beyond M3's three slots — custom design tokens via CompositionLocal |
references/theming-material3.md |
| Touch targets, spacing, canonical layouts, foldables, M3 compliance audit | android-skills:android-ux |
| Recomposition skipping, stability, baseline profiles, benchmarking | references/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 restoration |
references/focus-navigation.md |
| Removed/replaced APIs, migration paths from older Compose versions | references/deprecated-patterns.md |
| Styles API (experimental, being redesigned — property definitions are moving out of foundation into the design-system layer) | No reference kept. Read android docs fetch kb://android/develop/ui/compose/styles/styles-update and the androidx.compose.foundation.style source for the version in use. styleable() without an explicit styleState tracks no interaction state. |
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 CompositionLocal |
references/design-to-compose.md |
CMP gotchas (collectAsState-in-commonMain, commonMain @Preview package, Lottie→Kottie, compiler-stability-non-JVM) + Android-only→CMP migration |
references/multiplatform.md |
| Desktop (Window, Tray, MenuBar), iOS (UIKitView), Web (ComposeViewport) | references/platform-specifics.md |
3. Cite the source
When referencing Compose internals, point to the exact source file:
// See: compose/runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/Composer.ktSource Code Verification
Verify against live source code — never rely on training data alone. Read the topic reference first, then confirm the behaviour in source: android-skills:android-source-search holds the lookup strategy (the android-sources MCP when present, raw GitHub / Gitiles otherwise). Compose Multiplatform source is JetBrains/compose-multiplatform-core, branch jb-main.
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:
android docs search "LazyColumn performance" # ranked kb:// URLs + summaries
android docs fetch kb://android/develop/ui/compose/lists # full content of a result4800+ 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.
Bundled files
references/accessibility.md3 KBreferences/animation-advanced.md4 KBreferences/animation-recipes.md3 KBreferences/animation.md5 KBreferences/composition-locals.md3 KBreferences/deprecated-patterns.md5 KBreferences/design-to-compose.md8 KBreferences/focus-navigation.md14 KBreferences/lists-scrolling.md6 KBreferences/modifiers.md5 KBreferences/multiplatform.md4 KBreferences/navigation.md5 KBreferences/performance.md26 KBreferences/platform-specifics.md4 KBreferences/screen-structure.md3 KBreferences/side-effects.md4 KBreferences/state-management.md11 KBreferences/theming-material3.md2 KBreferences/view-composition.md9 KB
FAQ
What does Compose do?
Compose and Compose Multiplatform expert for UI development across Android, Desktop, iOS, and Web. Covers state management, composition, animations, navigation, performance, and design-to-code workflows, 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.
Who made Compose?
rcosteira79 (a community member) publishes it in the rcosteira79/android-skills repository on GitHub.
Is Compose free?
Yes. Compose is open source, published by rcosteira79 under the MIT license.
What comes with Compose?
Its instructions and 19 files the agent reads only when a task needs them, such as references, examples or scripts.
Which agents can use 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.
Instructions to make or update an app's UI so that it adapts to different Android devices including phones, tablets, foldables, laptops, desktop, TV, Auto, and XR. It includes how to handle different window sizes, pointing devices (such as mouse) and text entry devices (such as keyboard) using the Compose MediaQuery API, and how to preserve UI, navigation, scroll, and media playback state across configuration changes (such as folding/unfolding a foldable, rotating a device, or resizing a window). It also covers multi-pane layouts using Navigation3 Scenes, adaptive UI components (such as buttons) with varying target sizes, and adaptive layouts (including navigation areas - nav rails and nav bars) using the Compose Grid and FlexBox APIs. It also covers desktop experiences with keyboard shortcuts, tooltips and custom cursors.
Use this skill to migrate your Jetpack Compose app to add adaptive edge-to-edge support and troubleshoot common issues. Use this skill to fix UI components (like buttons or lists) that are obscured by or overlapping with the navigation bar or status bar, fix IME insets, and fix system bar legibility.
Adds inking and freehand drawing capabilities to an Android app using Jetpack Ink (androidx.ink) and Compose. Use this skill when implementing stylus or touch drawing surfaces, rendering wet and dry ink strokes, configuring stock brushes (pressure pen, marker, highlighter), implementing geometry-based erasing, linear undo and redo history, or stroke persistence with Room. Delivers working Compose and ViewModel implementations. Don't use for View-based (XML) inking or programmatic custom BrushFamily creation. For custom BrushFamily creation, custom tip shapes, or behavior node graphs, suggest the ink-custom-brush-builder skill.
Creates custom BrushFamily definitions for an Android app using Jetpack Ink (androidx.ink 1.1.0-alpha03 and higher). Use this skill when configuring custom BrushTip shapes, adding pressure, tilt, speed, or noise sensitivity using BrushBehavior node graphs, creating multi-coat layered brushes, applying tiling or particle stamping textures, configuring SlidingWindowModel input smoothing, or serializing brushes. Delivers complete Kotlin BrushFamily, BrushCoat, BrushTip, BrushPaint, and BrushBehavior implementations. Don't use for View-based (XML) inking, Compose drawing surface setup, or stock brush selection. For Compose drawing surface setup, InProgressStrokes wet and dry rendering, eraser, or persistence, suggest the ink-app-builder skill.
