A skill that gives Claude Code and other AI coding tools guidance for Jetpack Compose and Compose Multiplatform UI work across Android, Desktop, iOS, and Web, covering state, navigation, and animation.
Claude Code
> /plugin marketplace add aldefy/compose-skill> /plugin install compose-expert@aldefy-compose-skill
Codex
$ npx skills add aldefy/compose-skill -a codex
Cursor
$ npx skills add aldefy/compose-skill -a cursor
Gemini CLI
$ npx skills add aldefy/compose-skill -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add aldefy/compose-skill$ copilot plugin install compose-expert@aldefy-compose-skill
OpenCode
$ npx skills add aldefy/compose-skill -a opencode
Windsurf
$ npx skills add aldefy/compose-skill -a windsurf
Make your AI coding tool actually understand Compose — Android, Desktop, iOS, and Web. Backed by real source code from androidx/androidx and compose-multiplatform-core — not vibes.
This skill is distributed as a plugin. See docs/INSTALL.md for per-host instructions:
/plugin marketplace add aldefy/compose-skill → /plugin install compose-expertcopilot plugin install aldefy/compose-skillAlready installed manually? See docs/MIGRATION.md.
New versions are published as GitHub Releases with migration notes. Run /plugin update (Claude Code) or copilot plugin update aldefy/compose-skill (Copilot) to pick them up.
AI coding tools generate Compose code that compiles but gets the details wrong. Incorrect remember usage, unstable recompositions, broken modifier ordering, deprecated navigation patterns, hallucinated APIs that don't exist. They guess at behavior instead of knowing it.
This skill fixes that by giving your AI assistant two things:
androidx/androidx and compose-multiplatform-core so the agent can check how things actually work| Area | Without the skill | With it |
|---|---|---|
| State | Uses remember { mutableStateOf() } everywhere, even when derivedStateOf or rememberSaveable is the right call | Picks the right state primitive for each situation |
| Performance | Generates code that recomposes every frame | Applies stability annotations, deferred reads, key {} on lists |
| Navigation | String-based routes (deprecated) | Type-safe routes with @Serializable route classes |
| Modifiers | Random ordering, misses clickable before padding bugs | Correct ordering with reasoning |
| Side effects | Wrong coroutine scope, bad LaunchedEffect keys | Correct effect selection and lifecycle-aware keys |
| APIs | Hallucinates parameters that don't exist | Checks against actual source before suggesting |
| Multiplatform | Uses Android-only APIs in shared code | Uses expect/actual, Res.* resources, platform-correct patterns |
| Design-to-code | Literal Figma node translation, wrong modifier ordering | Semantic M3 components, correct ordering, theme tokens |
| Crash safety | No defensive patterns | Guards against zero-size DrawScope, duplicate keys, stale derivedStateOf |
| Topic | What the agent learns |
|---|---|
| State management | remember, mutableStateOf, derivedStateOf, rememberSaveable, state hoisting, snapshotFlow |
| View composition | Structuring composables, slot APIs, @Preview patterns, extraction rules |
| Performance | Recomposition skipping, @Stable/@Immutable, deferred reads, baseline profiles, benchmarking |
| Navigation | Type-safe routes, NavHost, deep links, shared element transitions, back stack |
| Animation | animate*AsState, AnimatedVisibility, Crossfade, updateTransition, shared transitions, 9 recipes (shimmer, swipe-to-dismiss, etc.), gesture-driven patterns, Figma curve mapping |
| Lists and scrolling | LazyColumn/LazyRow/LazyGrid, Pager, key {}, contentType, scroll state |
| Side effects | LaunchedEffect, DisposableEffect, SideEffect, rememberCoroutineScope |
| Modifiers | Ordering rules, custom modifiers, Modifier.Node migration |
| Theming | MaterialTheme, ColorScheme, dynamic color, Typography, shapes, dark theme |
| Accessibility | Semantics, content descriptions, traversal order, touch targets, TalkBack |
| CompositionLocals | LocalContext, LocalDensity, custom locals, when to use vs. parameter passing |
| Deprecated patterns | Removed APIs, migration paths from older Compose versions |
| Styles API (experimental) | Style {}, MutableStyleState, Modifier.styleable(), composition, theme integration, alpha06 gotchas |
| Design-to-code | Composable decomposition algorithm, Figma property mapping, spacing ownership, modifier ordering, design tokens |
| Production crash playbook | 6 crash patterns with root cause + fix, defensive patterns, production state/performance rules |
| Compose Multiplatform | CMP architecture, expect/actual, Res.* resources, API availability matrix, migration guide |
| Platform specifics | Desktop (Window, Tray, MenuBar), iOS (UIKitView, gotchas), Web/WASM (canvas limitations) |
| TV Compose | TV Material3 (Surface, Cards, Carousel, NavigationDrawer, TabRow), focus system, D-pad navigation, theming, immersive list, TVProvider |
| M3 Motion | All duration tokens (DurationShort1–4, DurationMedium1–4, DurationLong1–4, DurationExtraLong1–4), easing tokens with CubicBezierEasing values, MotionScheme API (defaultSpatialSpec, defaultEffectsSpec), Compose API mapping, decision tree, PR review flags |
| Atomic design | 5-level hierarchy (tokens, atoms, molecules, organisms, templates) mapped to Compose, M3 wrapper patterns, custom atom patterns, slot API contracts, token layer, anti-patterns |
| Paging 3 | PagingSource, Pager, PagingConfig, LazyPagingItems, LoadState UI handling, flatMapLatest for filter changes, RemoteMediator offline-first, MVI dual-flow pattern, asSnapshot/TestPager, full anti-pattern table |
| Nav 2 → Nav 3 migration | Conceptual shifts (you own the back stack), mechanical migration steps (NavKey, rememberNavBackStack, NavDisplay, entry-scoped ViewModels, deep-link parsing), original "Choosing Nav 2 vs Nav 3" decision guide with the CMP 1.10+ polymorphic-serialisation caveat |
| Source code | Actual .kt from androidx/androidx and compose-multiplatform-core for runtime, UI, foundation, material3, navigation, CMP |
You ask about Compose
|
v
AI reads SKILL.md (workflow + checklists)
|
v
Consults the right reference file
|
+-- state-management.md
+-- performance.md
+-- navigation.md
+-- design-to-compose.md
+-- production-crash-playbook.md
+-- multiplatform.md
+-- platform-specifics.md
+-- tv-compose.md
+-- ... (20 guides total)
|
+-- source-code/
+-- runtime-source.md
+-- material3-source.md
+-- cmp-source.md
+-- ... (6 source files)
Layer 1: guidance docs (24 files) — practical references with patterns, pitfalls, and do/don't examples. The skill's ## Quick Routing section maps task signals to a single file so the agent lands on the right reference in one read.
Layer 2: source code receipts (6 files) — the actual Kotlin source from androidx/androidx and compose-multiplatform-core. When the agent needs to verify an implementation detail rather than guess, it reads these.
skills/compose-expert/
├── SKILL.md # Main workflow + checklists
└── references/
├── state-management.md # State, remember, hoisting, derivedStateOf
├── view-composition.md # Structuring composables, slots, previews
├── modifiers.md # Modifier ordering, custom modifiers, Modifier.Node
├── side-effects.md # LaunchedEffect, DisposableEffect, SideEffect
├── composition-locals.md # CompositionLocal, LocalContext, custom locals
├── lists-scrolling.md # LazyColumn/Row/Grid, Pager, keys, contentType
├── navigation.md # NavHost, type-safe routes, deep links (Nav 2)
├── navigation-migration.md # Nav 2 → Nav 3 migration + decision guide
├── paging.md # Paging 3 core: PagingSource, Pager, LazyPagingItems
├── paging-offline.md # RemoteMediator, offline-first, LoadState gotchas
├── paging-mvi-testing.md # MVI dual-flow pattern, asSnapshot, TestPager
├── animation.md # animate*AsState, AnimatedVisibility, transitions
├── theming-material3.md # MaterialTheme, ColorScheme, dynamic color
├── performance.md # Recomposition, stability, benchmarking
├── accessibility.md # Semantics, content descriptions, testing
├── deprecated-patterns.md # Removed APIs, migration paths
├── styles-experimental.md # Styles API (@ExperimentalFoundationStyleApi)
├── design-to-compose.md # Figma/screenshot decomposition, property mapping
├── production-crash-playbook.md # Crash patterns, defensive coding, production rules
├── multiplatform.md # CMP architecture, expect/actual, Res.*, migration
├── platform-specifics.md # Desktop, iOS, Web/WASM platform APIs and gotchas
├── tv-compose.md # Android TV: tv-material, Carousel, focus, D-pad
├── atomic-design.md # Atomic design system: tokens, atoms, molecules, organisms, templates
└── source-code/ # Actual .kt source
├── runtime-source.md # Composer, Recomposer, State, Effects
├── ui-source.md # AndroidCompositionLocals, Modifier, Layout
├── foundation-source.md # LazyList, BasicTextField, Gestures
├── material3-source.md # MaterialTheme, all M3 components
├── navigation-source.md # NavHost, ComposeNavigator
└── cmp-source.md # Window, UIKitView, ComposeViewport, Resources
The skill is just markdown files. Every tool below reads the same content. Pick yours.
Skills are file-based — Claude Code discovers them automatically from ~/.claude/skills/ (personal) or .claude/skills/ (project-specific).
Personal skill (available in all your projects):
Clone the repo and copy the skill into your personal skills directory:
git clone https://github.com/aldefy/compose-skill.git /tmp/compose-skill
mkdir -p ~/.claude/skills
cp -r /tmp/compose-skill/skills/compose-expert ~/.claude/skills/
Project-specific skill (just one project):
Clone the repo and copy the skill into your project's
.claude/skillsdirectory:
Stars on GitHub
A development methodology for coding agents that makes the agent brainstorm before building, follow plans, run parallel work and finish branches in a disciplined way. You get fewer skipped steps and more consistent results from your coding assistant.
@obraHelps you take a change from a rough idea or bug report through to a tested, reviewed result, with each step handled by a focused skill. Its skills cover pinning down domain terms, designing module interfaces, diagnosing hard bugs, and reviewing changes against your repo's coding standards.
@mattpocockGives your coding agent a planning, testing and review routine to follow on every task. It plans before building, checks changes with tests, has a fresh reviewer look for regressions, and saves repeated wins as reusable skills.
@affaan-mDeveloper tools for working on the React codebase itself. Provides skills for extracting error messages, managing and debugging feature flags across release channels, running Flow type checks, and fixing lint and formatting issues before committing.
@facebookInstall it with the command on its page. It includes compose-expert. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it