compose-skill

What changes when you install it

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

What's covered

| 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 | | Source code | Actual .kt from androidx/androidx and compose-multiplatform-core for runtime, UI, foundation, material3, navigation, CMP |

How it works

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 (19 files) — practical references with patterns, pitfalls, and do/don't examples. This is what the agent reads first.

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.

File structure

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
    ├── 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