Skip to content
Development
Skill

/compose-expert

Compose and Compose Multiplatform expert for UI development across Android, Desktop, iOS, and Web. Use whenever the user mentions Compose APIs (@Composable, remember, LaunchedEffect, NavHost, MaterialTheme, LazyColumn, Modifier, recomposition), Compose Multiplatform (commonMain,

From plugin
compose-expert
5981 skill

Claude Code

$ npx -y skills add aldefy/compose-skill --skill compose-expert --agent claude-code

SKILL.md

compose-expert.SKILL.md
name: compose-expert
description: >
  Compose and Compose Multiplatform expert for UI development across Android, Desktop,
  iOS, and Web. Use whenever the user mentions Compose APIs (@Composable, remember,
  LaunchedEffect, NavHost, MaterialTheme, LazyColumn, Modifier, recomposition),
  Compose Multiplatform (commonMain, expect/actual, Res.*, ComposeUIViewController,
  UIKitView, ComposeViewport), Android TV (tv-material, D-pad, focus, Carousel),
  Material 3 motion, atomic design systems, design-to-code workflows, Paging 3, or
  navigation. Activates Review Mode on GitHub PR URLs and review phrases ("review
  this PR", "what's wrong with this"). Auto-detects Compose projects on
  session_start. Backed by actual androidx/androidx and JetBrains/compose-multiplatform-core
  source receipts. See "## When this skill applies" in SKILL.md for the full trigger
  surface.
version: 2.5.2

> **Installation notice:** This skill is now distributed as a plugin. > If you copied files into `~/.claude/skills/` manually, you are on an > unmaintained install path and will not receive updates. Migrate via: > > /plugin marketplace add aldefy/compose-skill > /plugin install compose-expert > > See [MIGRATION.md](../docs/MIGRATION.md) for Codex and Copilot CLI instructions. > This banner will remain through v2.x and escalate in v3.0.

When this skill applies

The frontmatter `description:` is intentionally short to satisfy Codex / Copilot CLI's 1024-character cap on that field (see issue #12). The full trigger surface lives here so it stays available to Claude after the skill loads.

Compose API mentions

`@Composable`, `remember`, `mutableStateOf`, `derivedStateOf`, `rememberSaveable`, `LaunchedEffect`, `DisposableEffect`, `SideEffect`, `rememberCoroutineScope`, `Scaffold`, `NavHost`, `NavController`, `MaterialTheme`, `ColorScheme`, `Typography`, `LazyColumn`, `LazyRow`, `LazyVerticalGrid`, `HorizontalPager`, `Modifier`, `Modifier.Node`, `recomposition`, `CompositionLocal`, `Style`, `styleable`, `MutableStyleState`, `Material 3 Expressive`, `M3 Expressive`, `MaterialExpressiveTheme`, `ButtonGroup`, `SplitButton`, `FloatingActionButtonMenu`, `LoadingIndicator`, `HorizontalFloatingToolbar`, `NavDisplay`, `NavKey`, `rememberNavBackStack`, `NavigableListDetailPaneScaffold`, `TextFieldState`, `InputTransformation`, `OutputTransformation`, `computedStateOf`, `MediaQuery`, `Grid`, `FlexBox`, `A2uiSurface`, `StateStore`, `RemoteCompose`, `MeshGradientPainter`, `PolygonShape`, `MorphPolygonShape`, `AGSL`, `RuntimeShader`, `ShaderBrush`, `RenderEffect`, `AgentRunner`, `AgentSession`, `GenerativeModel`, `Gemini Nano`, `ML Kit Agentic API`, `androidx.tracing`, `traceCoroutine`, `tracing-wire`, `InProgressStrokesView`, `androidx.ink`, `Jetpack Ink`, `CarAppService`, `androidx.car.app`, `Android Auto`, `Android Automotive OS`, `parked apps`, `Jetpack Keep`, `UsesReflectionToConstruct`, `Engine Hub`, `android/skills`.

Compose Multiplatform / KMP

`Compose Multiplatform`, `CMP`, `KMP`, `commonMain`, `expect`, `actual`, `ComposeUIViewController`, `Window` composable, `UIKitView`, `ComposeViewport`, `Res.drawable`, `Res.string`, `SkikoMain`, `Compose Hot Reload`, `WindowState v2`, `native text input`, `awaitPendingResourceStateLoads`.

Agentic, remote, adaptive, and spatial UI

`A2UI`, `Agent-to-UI`, `material3-a2ui`, `A2uiCatalog`, `generative UI`, `Remote Compose`, `RemoteComposable`, `Wear Widget`, `MediaQuery`, `FlexBox`, `adaptive layout`, `trackpad`, `indirect input`, `Compose Glimmer`, `Subspace`, `Android XR`, `projected activity`, `Jetpack AppState`, `StateStore`, `Transform`, `AppFunctions`, `@AppFunctionDeclaration`, `AppFunctionService`, `AppFunctionManager`, `Android MCP`, `EXECUTE_APP_FUNCTIONS`.

Android TV

`tv-material`, `tv-foundation`, `Carousel`, `NavigationDrawer` (TV), `D-pad`, `focus indication`, `FocusRequester` on TV, `10-foot UI`, `living room`, `tv compose`, `Android TV`, `Google TV`, `leanback migration`.

Paging 3

`PagingSource`, `Pager`, `PagingConfig`, `PagingData`, `LazyPagingItems`, `collectAsLazyPagingItems`, `RemoteMediator`, `LoadState`, `asSnapshot`, `TestPager`, `cachedIn`.

Design system / design-to-code

`atomic design`, `atoms`, `molecules`, `organisms`, `templates`, `design tokens`, `design system`, `component library`, `reusable component`, `Figma to Compose`, `design to compose`, `build this UI`, `implement this design`, `spec to code`, `redline`.

Casual phrasing

"my compose screen is slow", "my recomposition is broken", "how do I pass data between screens", "how do I build a TV app", "Android UI", "Kotlin UI", "compose layout", "compose navigation", "compose animation", "compose styles", "desktop compose", "iOS compose", "compose web".

Review Mode triggers

Any GitHub PR URL matching `github.com/.*/pull/\d+`, or phrases: "review this PR", "review this diff", "review this code", "check this code", "check this diff", "what's wrong with this". On match, follow `references/pr-review.md` for the review workflow and report, and also read the topic reference(s) from Quick Routing for any dimension the request names (performance, lists, shaders, navigation…).

Session start

Auto-detect Compose projects on `session_start` — see `references/auto-init.md`.

Quick Routing

Use this table first. Match the user's signal to one reference file and read it before answering. `source-code/` files are supporting evidence — load a `references/*.md` file first, then cite `source-code/` for implementation proof when receipts matter.

State, recomposition, side effects

  • **`remember`, `rememberSaveable`, `mutableStateOf` vs `mutableIntStateOf`, state hoisting** → `references/state-management.md`
  • **`derivedStateOf`, `snapshotFlow`, StateFlow in UI, recomposition scope boundaries** → `references/state-management.md` (secondary: `references/performance.md`)
  • **`LaunchedEffect`, `SideEffect`, `DisposableEffect`, `rememberUpdatedState`, `rememberCo
Read more
@aldefy
Ships withcompose-expert

Jetpack Compose Agent Skill — AI-powered coding guidance with actual androidx/androidx source code receipts. Works with Claude Code, Codex CLI, Gemini CLI, Cursor, Copilot, Windsurf, and more.

Stars on GitHub

Momentum

stars in total
598
Star history of aldefy/compose-skill on GitHub, a chart by star-history.com

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills11d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc13d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react2d252k
@facebook@facebookInstall Skill

Questions about compose-expert.

Which coding agents can use compose-expert?
compose-expert installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.