Back to Details

compose-expert

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
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 for Codex and Copilot CLI instructions. This banner will remain through v2.x and escalate in v3.0.
安装通知： 本技能现已以插件形式分发。 如果你之前手动将文件复制到了 
~/.claude/skills/
目录，那么你使用的是 无人维护的安装路径，将无法收到更新。请通过以下命令迁移：
/plugin marketplace add aldefy/compose-skill
/plugin install compose-expert
Codex和Copilot CLI的迁移说明请参见MIGRATION.md。 本提示横幅将在v2.x版本期间保留，并在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.
前置元数据中的
description:
字段刻意保持简短，以满足Codex / Copilot CLI对该字段1024字符的限制（参见issue #12）。完整的触发范围放在此处，以便技能加载后Claude仍可访问。

Compose API mentions

Compose API相关触发词

@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
.
@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
。

Compose Multiplatform / KMP

Compose Multiplatform / KMP相关触发词

Compose Multiplatform
, 
CMP
, 
KMP
, 
commonMain
, 
expect
, 
actual
, 
ComposeUIViewController
, 
Window
composable, 
UIKitView
, 
ComposeViewport
, 
Res.drawable
, 
Res.string
, 
SkikoMain
.
Compose Multiplatform
、
CMP
、
KMP
、
commonMain
、
expect
、
actual
、 
ComposeUIViewController
、
Window
可组合函数、
UIKitView
、
ComposeViewport
、 
Res.drawable
、
Res.string
、
SkikoMain
。

Android TV

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
.
tv-material
、
tv-foundation
、
Carousel
、
NavigationDrawer
（TV版）、 
D-pad
、
focus indication
、TV端
FocusRequester
、
10-foot UI
、 
living room
、
tv compose
、
Android TV
、
Google TV
、
leanback migration
。

Paging 3

Paging 3相关触发词

PagingSource
, 
Pager
, 
PagingConfig
, 
PagingData
, 
LazyPagingItems
, 
collectAsLazyPagingItems
, 
RemoteMediator
, 
LoadState
, 
asSnapshot
, 
TestPager
, 
cachedIn
.
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
.
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".
“我的Compose页面卡顿”、“我的recomposition有问题”、 “如何在页面间传递数据”、“如何开发TV应用”、 “Android UI”、“Kotlin UI”、“Compose布局”、“Compose导航”、 “Compose动画”、“Compose样式”、“桌面端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
exclusively.
任何匹配
github.com/.*/pull/\d+
格式的GitHub PR链接，或以下短语： “review this PR”、“review this diff”、“review this code”、 “check this code”、“check this diff”、“what's wrong with this”。 匹配成功后，将严格遵循
references/pr-review.md
中的流程执行。

Session start

会话开始时

Auto-detect Compose projects on 
session_start
— see 
references/auto-init.md
.
在
session_start
时自动检测Compose项目——参见
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.
请优先使用此表。将用户的需求匹配到对应的参考文件，在回答前先阅读该文件。
source-code/
目录下的文件是支撑证据——请先加载
references/*.md
文件，当需要源码凭证时，再引用
source-code/
中的内容作为实现依据。

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
    , 
    rememberCoroutineScope
     → 
    references/side-effects.md
  • Recomposition frequency, "my screen recomposes too often", stability, 
    @Stable
    /
    @Immutable
    , Compose compiler metrics, baseline profiles, strong skipping     → 
    references/performance.md
  • CompositionLocal
    , ambient values, theming propagation, 
    LocalContext
    misuse, custom locals     → 
    references/composition-locals.md
  • remember
    、
    rememberSaveable
    、
    mutableStateOf
    与 
    mutableIntStateOf
    的区别、状态提升     → 
    references/state-management.md
  • derivedStateOf
    、
    snapshotFlow
    、UI层StateFlow、重组作用域边界     → 
    references/state-management.md
    （次要参考：
    references/performance.md
    ）
  • LaunchedEffect
    、
    SideEffect
    、
    DisposableEffect
    、
    rememberUpdatedState
    、
    rememberCoroutineScope
     → 
    references/side-effects.md
  • 重组频率、“我的页面重组太频繁”、稳定性、
    @Stable
    /
    @Immutable
    、Compose编译器指标、基准配置文件、强跳过模式     → 
    references/performance.md
  • CompositionLocal
    、环境值、主题传递、
    LocalContext
    误用、自定义Local     → 
    references/composition-locals.md

Animation and motion

动画与动效

  • animate*AsState
    , 
    AnimatedVisibility
    , 
    Crossfade
    , 
    updateTransition
    , 
    Animatable
    , 
    rememberInfiniteTransition
     → 
    references/animation.md
  • Shared element transitions, gesture-driven animation, 
    Modifier.graphicsLayer
    , Canvas drawing, custom motion spec     → 
    references/animation.md
    (secondary: 
    references/modifiers.md
    for 
    graphicsLayer
    )
  • M3 motion tokens, 
    MotionTokens
    , 
    MotionScheme
    , animation duration tokens, M3 easing curves     → 
    references/material3-motion.md
  • animate*AsState
    、
    AnimatedVisibility
    、
    Crossfade
    、
    updateTransition
    、
    Animatable
    、
    rememberInfiniteTransition
     → 
    references/animation.md
  • 共享元素过渡、手势驱动动画、
    Modifier.graphicsLayer
    、Canvas绘制、自定义动效规格     → 
    references/animation.md
    （次要参考：
    references/modifiers.md
    中
    graphicsLayer
    相关内容）
  • M3动效令牌、
    MotionTokens
    、
    MotionScheme
    、动画时长令牌、M3缓动曲线     → 
    references/material3-motion.md

Layout, lists, modifiers

布局、列表与修饰符

  • LazyColumn
    , 
    LazyRow
    , 
    LazyVerticalGrid
    , 
    LazyHorizontalGrid
    , 
    key
    /
    itemKey
    , 
    contentType
    , 
    LazyListState
    , scroll state, sticky headers     → 
    references/lists-scrolling.md
  • HorizontalPager
    , 
    VerticalPager
    , 
    PagerState
     → 
    references/lists-scrolling.md
  • Modifier chain ordering, custom layout, 
    Layout
    , 
    SubcomposeLayout
    , layout modifier, draw modifier, 
    Painter
    , 
    Modifier.Node
     → 
    references/modifiers.md
  • LazyColumn
    、
    LazyRow
    、
    LazyVerticalGrid
    、
    LazyHorizontalGrid
    、
    key
    /
    itemKey
    、
    contentType
    、
    LazyListState
    、滚动状态、粘性头部     → 
    references/lists-scrolling.md
  • HorizontalPager
    、
    VerticalPager
    、
    PagerState
     → 
    references/lists-scrolling.md
  • Modifier链顺序、自定义布局、
    Layout
    、
    SubcomposeLayout
    、布局修饰符、绘制修饰符、
    Painter
    、
    Modifier.Node
     → 
    references/modifiers.md

Navigation

导航

  • NavHost
    , 
    NavController
    , back stack, deep links, type-safe 
    @Serializable
    routes, navigation graph, nested graphs     → 
    references/navigation.md
  • Migrating from Nav 2 to Nav 3, 
    NavDisplay
    , 
    NavKey
    , 
    rememberNavBackStack
    , 
    NavBackStackEntry
    changes     → 
    references/navigation-migration.md
  • Choosing between Nav 2 and Nav 3, type-safe navigation decision, KMP navigation → 
    references/navigation-migration.md
    (secondary: 
    references/navigation.md
    )
  • Advanced Nav 3: returning results between destinations, auth-gated/conditional navigation, animated/shared-element transitions in 
    NavDisplay
    , adaptive list-detail (
    NavigableListDetailPaneScaffold
    ), multiple/per-tab back stacks     → 
    references/navigation-migration.md
  • NavHost
    、
    NavController
    、返回栈、深链接、类型安全
    @Serializable
    路由、导航图、嵌套导航图     → 
    references/navigation.md
  • 从Nav 2迁移到Nav 3、
    NavDisplay
    、
    NavKey
    、
    rememberNavBackStack
    、
    NavBackStackEntry
    变更     → 
    references/navigation-migration.md
  • Nav 2与Nav 3的选型、类型安全导航决策、KMP导航 → 
    references/navigation-migration.md
    （次要参考：
    references/navigation.md
    ）
  • 进阶Nav 3：目标间返回结果、鉴权/条件导航、
    NavDisplay
    中的动画/共享元素过渡、自适应列表详情布局（
    NavigableListDetailPaneScaffold
    ）、多返回栈/分标签返回栈     → 
    references/navigation-migration.md

Paging

分页

  • PagingSource
    , 
    PagingData
    , 
    Pager
    setup, 
    PagingConfig
    , 
    pagingDataFlow
    , invalidation     → 
    references/paging.md
  • LazyPagingItems
    , 
    collectAsLazyPagingItems
    , 
    itemKey
    , 
    itemContentType
    , 
    LoadState
    in UI, retry/refresh     → 
    references/paging.md
  • RemoteMediator
    , offline-first paging, network + cache paging, 
    loadState.source.refresh
     → 
    references/paging-offline.md
  • Paging with MVI, dual-flow pattern, paging tests (
    asSnapshot
    , 
    TestPager
    ), 
    CombinedLoadStates
    , paging anti-patterns     → 
    references/paging-mvi-testing.md
  • PagingSource
    、
    PagingData
    、
    Pager
    配置、
    PagingConfig
    、
    pagingDataFlow
    、失效机制     → 
    references/paging.md
  • LazyPagingItems
    、
    collectAsLazyPagingItems
    、
    itemKey
    、
    itemContentType
    、UI层
    LoadState
    、重试/刷新     → 
    references/paging.md
  • RemoteMediator
    、离线优先分页、网络+缓存分页、
    loadState.source.refresh
     → 
    references/paging-offline.md
  • MVI架构下的分页、双流模式、分页测试（
    asSnapshot
    、
    TestPager
    ）、
    CombinedLoadStates
    、分页反模式     → 
    references/paging-mvi-testing.md

Theming and design systems

主题与设计系统

  • MaterialTheme
    , 
    ColorScheme
    , 
    Typography
    , 
    Shapes
    , dynamic color, M3 tokens, color roles     → 
    references/theming-material3.md
  • Material 3 Expressive, 
    MaterialExpressiveTheme
    , 
    ButtonGroup
    , 
    SplitButton
    , 
    FloatingActionButtonMenu
    , 
    LoadingIndicator
    (wavy), 
    HorizontalFloatingToolbar
    , 
    @ExperimentalMaterial3ExpressiveApi
     → 
    references/theming-material3.md
    (motion: 
    references/material3-motion.md
    )
  • Atom, molecule, organism, template, component hierarchy, design system structure, reusable components, design tokens → 
    references/atomic-design.md
  • Figma → Compose, screenshot → composable, design token translation, spec-to-code, redline interpretation → 
    references/design-to-compose.md
  • Style {}
    , 
    MutableStyleState
    , 
    Modifier.styleable()
    (experimental Foundation Styles API)     → 
    references/styles-experimental.md
  • MaterialTheme
    、
    ColorScheme
    、
    Typography
    、
    Shapes
    、动态颜色、M3令牌、颜色角色     → 
    references/theming-material3.md
  • Material 3 Expressive、
    MaterialExpressiveTheme
    、
    ButtonGroup
    、
    SplitButton
    、
    FloatingActionButtonMenu
    、波浪式
    LoadingIndicator
    、
    HorizontalFloatingToolbar
    、
    @ExperimentalMaterial3ExpressiveApi
     → 
    references/theming-material3.md
    （动效部分参考：
    references/material3-motion.md
    ）
  • 原子、分子、有机体、模板、组件层级、设计系统结构、可复用组件、设计令牌 → 
    references/atomic-design.md
  • Figma → Compose、截图转可组合函数、设计令牌转换、设计稿转代码、标注解读 → 
    references/design-to-compose.md
  • Style {}
    、
    MutableStyleState
    、
    Modifier.styleable()
    （实验性Foundation Styles API）     → 
    references/styles-experimental.md

Multiplatform and platform-specific

多平台与平台特定功能

  • iOS/Desktop/Web CMP targets, 
    expect
    /
    actual
    , 
    commonMain
    , 
    Res.drawable
    , 
    Res.string
    , platform-specific composables     → 
    references/multiplatform.md
  • ComposeUIViewController
    (iOS), 
    Window
    /
    Tray
    /
    MenuBar
    (Desktop), 
    UIKitView
    , 
    ComposeViewport
    (Web), platform interop     → 
    references/platform-specifics.md
  • TV Compose, 
    androidx.tv
    , D-pad focus, 
    FocusRequester
    on TV, 
    Carousel
    , 
    NavigationDrawer
    (TV), 10-foot UI, leanback migration     → 
    references/tv-compose.md
  • iOS/桌面/Web端CMP目标、
    expect
    /
    actual
    、
    commonMain
    、
    Res.drawable
    、
    Res.string
    、平台特定可组合函数     → 
    references/multiplatform.md
  • ComposeUIViewController
    （iOS）、
    Window
    /
    Tray
    /
    MenuBar
    （桌面端）、
    UIKitView
    、
    ComposeViewport
    （Web端）、平台互操作     → 
    references/platform-specifics.md
  • TV Compose、
    androidx.tv
    、D-pad焦点、TV端
    FocusRequester
    、
    Carousel
    、TV版
    NavigationDrawer
    、10英尺UI、Leanback迁移     → 
    references/tv-compose.md

Interop and accessibility

互操作与无障碍

  • Compose inside XML, 
    AndroidView
    , 
    ComposeView
    , 
    AbstractComposeView
    , hybrid migration, View → Compose interop     → 
    references/view-composition.md
  • Accessibility, 
    Modifier.semantics
    , TalkBack, touch target size, 
    contentDescription
    , WCAG, traversal order     → 
    references/accessibility.md
  • XML中嵌入Compose、
    AndroidView
    、
    ComposeView
    、
    AbstractComposeView
    、混合迁移、View → Compose互操作     → 
    references/view-composition.md
  • 无障碍、
    Modifier.semantics
    、TalkBack、触摸目标尺寸、
    contentDescription
    、WCAG、遍历顺序     → 
    references/accessibility.md

Production, review, migration

生产环境、审查与迁移

  • Production crash, ANR, Compose stack trace, 
    remember
    leak, zero-size DrawScope, duplicate keys, stale 
    derivedStateOf
     → 
    references/production-crash-playbook.md
  • PR review, code review, "review this diff", composable anti-patterns, smell detection, GitHub PR URL → 
    references/pr-review.md
  • Deprecated Compose API, "removed in version X", migration from old API, replaced symbols → 
    references/deprecated-patterns.md
  • Experimental opt-in, 
    @OptIn
    , 
    @ExperimentalFoundationStyleApi
    , unstable API usage     → 
    references/styles-experimental.md
    (for Styles); for general guidance, the relevant topic file
  • Session start, project detection, auto-init → 
    references/auto-init.md
  • 生产环境崩溃、ANR、Compose堆栈跟踪、
    remember
    泄漏、零尺寸DrawScope、重复键、过期的
    derivedStateOf
     → 
    references/production-crash-playbook.md
  • PR审查、代码审查、“审查此diff”、可组合函数反模式、坏味道检测、GitHub PR链接 → 
    references/pr-review.md
  • 已废弃的Compose API、“在版本X中移除”、旧API迁移、替换符号 → 
    references/deprecated-patterns.md
  • 实验性API opt-in、
    @OptIn
    、
    @ExperimentalFoundationStyleApi
    、不稳定API使用     → 
    references/styles-experimental.md
    （Styles相关）；通用指导请查看对应主题文件
  • 会话开始、项目检测、自动初始化 → 
    references/auto-init.md

Source-code receipts (cite, don't route to)

源码凭证（仅用于引用，不作为路由依据）

  • "Show me the actual implementation", "where in androidx is this", internal Compose mechanics → load the topic reference first, then cite the matching 
    references/source-code/*.md
    file:
    • Runtime/state internals (Composer, Snapshot, Effects, Remember) → 
      references/source-code/runtime-source.md
    • UI/layout/measurement/draw internals → 
      references/source-code/ui-source.md
    • Foundation (LazyList, Pager, Clickable, Scrollable, BasicTextField) → 
      references/source-code/foundation-source.md
    • Material3 components → 
      references/source-code/material3-source.md
    • Navigation Compose internals → 
      references/source-code/navigation-source.md
    • CMP entry points (Window, ComposeUIViewController, UIKitView, ComposeViewport) → 
      references/source-code/cmp-source.md
  • “给我看实际实现”、“这个在androidx的什么位置”、Compose内部机制 → 先加载对应主题的参考文件，再引用匹配的
    references/source-code/*.md
    文件：
    • 运行时/状态内部机制（Composer、Snapshot、Effects、Remember）→ 
      references/source-code/runtime-source.md
    • UI/布局/测量/绘制内部机制 → 
      references/source-code/ui-source.md
    • Foundation（LazyList、Pager、Clickable、Scrollable、BasicTextField）→ 
      references/source-code/foundation-source.md
    • Material3组件 → 
      references/source-code/material3-source.md
    • Navigation Compose内部机制 → 
      references/source-code/navigation-source.md
    • CMP入口点（Window、ComposeUIViewController、UIKitView、ComposeViewport）→ 
      references/source-code/cmp-source.md

Compose Expert Skill

Compose专家技能

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
.
为编写正确、高性能的Compose代码提供中立、实用的指导——覆盖Android、桌面端、iOS和Web端。涵盖Jetpack Compose与Compose Multiplatform。基于对
androidx/androidx
和
JetBrains/compose-multiplatform-core
真实源码的分析构建。

Review Mode

审查模式

Activate when the input contains a GitHub PR URL (
github.com/.+/pull/\d+
) or explicit review phrases: "review this PR", "review this diff", "check this code", "what's wrong with this".
When Review Mode activates:
  1. Do not follow the generation workflow below
  2. Read 
    references/pr-review.md
    and follow its workflow exclusively
  3. Output a structured local review report — do not post to GitHub
触发条件：输入内容包含GitHub PR链接（
github.com/.+/pull/\d+
）或明确的审查短语：“review this PR”、“review this diff”、“check this code”、“what's wrong with this”。
审查模式激活后：
  1. 不要遵循下方的生成工作流
  2. 阅读
    references/pr-review.md
    并严格遵循其中的工作流
  3. 输出结构化的本地审查报告——不要发布到GitHub

Workflow

工作流

When helping with Compose code, follow this checklist:
在协助处理Compose代码时，请遵循以下检查清单：

1. Understand the request

1. 理解需求

  • 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)?
  • 涉及Compose的哪一层？（Runtime、UI、Foundation、Material3、Navigation）
  • 这是状态问题、布局问题、性能问题，还是架构问题？
  • 是仅Android端的问题，还是Compose Multiplatform（CMP）的问题？

2. Analyze the design (if visual reference provided)

2. 分析设计（如果提供了视觉参考）

  • If the user shares a Figma frame, screenshot, or design spec, consult 
    references/design-to-compose.md
  • Decompose the design into a composable tree using the 5-step methodology
  • Map design tokens to MaterialTheme, spacing to CompositionLocals
  • Identify animation needs and consult 
    references/animation.md
    for recipes
  • 如果用户分享了Figma画板、截图或设计规范，请参考
    references/design-to-compose.md
  • 使用5步方法论将设计拆解为可组合函数树
  • 将设计令牌映射到MaterialTheme，间距映射到CompositionLocals
  • 确定动画需求，并参考
    references/animation.md
    中的实现方案

3. Consult the right reference

3. 查阅正确的参考资料

Read the relevant reference file(s) from 
references/
before answering:
TopicReference File
@State
, 
remember
, 
mutableStateOf
, state hoisting, 
derivedStateOf
, 
snapshotFlow
references/state-management.md
Structuring composables, slots, extraction, preview
references/view-composition.md
— for design system structure, also see 
references/atomic-design.md
Modifier ordering, custom modifiers, 
Modifier.Node
references/modifiers.md
LaunchedEffect
, 
DisposableEffect
, 
SideEffect
, 
rememberCoroutineScope
references/side-effects.md
CompositionLocal
, 
LocalContext
, 
LocalDensity
, custom locals
references/composition-locals.md
LazyColumn
, 
LazyRow
, 
LazyGrid
, 
Pager
, keys, content types
references/lists-scrolling.md
NavHost
, type-safe routes, deep links, shared element transitions
references/navigation.md
animate*AsState
, 
AnimatedVisibility
, 
Crossfade
, transitions
references/animation.md
— for M3 token selection, also see 
references/material3-motion.md
MaterialTheme
, 
ColorScheme
, dynamic color, 
Typography
, shapes
references/theming-material3.md
— for motion, see 
references/material3-motion.md
; for design tokens, see 
references/atomic-design.md
Recomposition skipping, stability, baseline profiles, benchmarking
references/performance.md
Semantics, content descriptions, traversal order, testing
references/accessibility.md
Removed/replaced APIs, migration paths from older Compose versions
references/deprecated-patterns.md
Styles API (experimental): 
Style {}
, 
MutableStyleState
, 
Modifier.styleable()
references/styles-experimental.md
Figma/screenshot decomposition, design tokens, spacing, modifier ordering
references/design-to-compose.md
Production crash patterns, defensive coding, state/performance rules
references/production-crash-playbook.md
Compose Multiplatform, 
expect
/
actual
, resources (
Res.*
), migration
references/multiplatform.md
Desktop (Window, Tray, MenuBar), iOS (UIKitView), Web (ComposeViewport)
references/platform-specifics.md
TV Compose: Surface, Carousel, NavigationDrawer, Cards, focus, D-pad
references/tv-compose.md
M3 motion tokens, 
MotionTokens
, 
MotionScheme
, animation duration, easing
references/material3-motion.md
PR URL, code review, "review this PR", "what's wrong with this"
references/pr-review.md
Session start, project detection
references/auto-init.md
Atomic design, design system, reusable component, component library, design tokens
references/atomic-design.md
回答前请先阅读
references/
目录下的相关参考文件：
主题参考文件
@State
、
remember
、
mutableStateOf
、状态提升、
derivedStateOf
、
snapshotFlow
references/state-management.md
可组合函数结构设计、插槽、提取、预览
references/view-composition.md
— 设计系统结构部分另见
references/atomic-design.md
Modifier顺序、自定义修饰符、
Modifier.Node
references/modifiers.md
LaunchedEffect
、
DisposableEffect
、
SideEffect
、
rememberCoroutineScope
references/side-effects.md
CompositionLocal
、
LocalContext
、
LocalDensity
、自定义Local
references/composition-locals.md
LazyColumn
、
LazyRow
、
LazyGrid
、
Pager
、键、内容类型
references/lists-scrolling.md
NavHost
、类型安全路由、深链接、共享元素过渡
references/navigation.md
animate*AsState
、
AnimatedVisibility
、
Crossfade
、过渡动画
references/animation.md
— M3令牌选择另见
references/material3-motion.md
MaterialTheme
、
ColorScheme
、动态颜色、
Typography
、形状
references/theming-material3.md
— 动效部分见
references/material3-motion.md
；设计令牌部分见
references/atomic-design.md
重组跳过、稳定性、基准配置文件、性能基准测试
references/performance.md
语义、内容描述、遍历顺序、测试
references/accessibility.md
已移除/替换的API、旧版Compose的迁移路径
references/deprecated-patterns.md
Styles API（实验性）：
Style {}
、
MutableStyleState
、
Modifier.styleable()
references/styles-experimental.md
Figma/截图拆解、设计令牌、间距、modifier顺序
references/design-to-compose.md
生产环境崩溃模式、防御性编程、状态/性能规则
references/production-crash-playbook.md
Compose Multiplatform、
expect
/
actual
、资源（
Res.*
）、迁移
references/multiplatform.md
桌面端（Window、Tray、MenuBar）、iOS（UIKitView）、Web端（ComposeViewport）
references/platform-specifics.md
TV Compose：Surface、Carousel、NavigationDrawer、Cards、焦点、D-pad
references/tv-compose.md
M3动效令牌、
MotionTokens
、
MotionScheme
、动画时长、缓动曲线
references/material3-motion.md
PR链接、代码审查、“review this PR”、“what's wrong with this”
references/pr-review.md
会话开始、项目检测
references/auto-init.md
原子设计、设计系统、可复用组件、组件库、设计令牌
references/atomic-design.md

4. Apply and verify

4. 应用并验证

  • 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
  • 编写遵循参考资料中模式的代码
  • 指出用户现有代码中存在的反模式
  • 建议最小可行的正确解决方案——不要过度设计

4a. Component building mode

4a. 组件构建模式

When the request involves building a component (composable that renders UI):
  • Consult 
    references/atomic-design.md
  • Classify the component level (atom, molecule, organism, template)
  • Apply the "Ask" prompt from Section 5 before scaffolding code
  • Ensure the component satisfies the atom contract (modifier, slots, tokens, defaults)
当需求涉及构建组件（渲染UI的可组合函数）时：
  • 参考
    references/atomic-design.md
  • 对组件进行层级分类（原子、分子、有机体、模板）
  • 在搭建代码框架前，应用第5节中的“提问”提示
  • 确保组件满足原子契约（modifier、插槽、令牌、默认值）

5. Cite the source

5. 引用来源

When referencing Compose internals, point to the exact source file:
// See: compose/runtime/runtime/src/commonMain/kotlin/androidx/compose/runtime/Composer.kt
引用Compose内部实现时，请指明具体的源文件：
// 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.
  1. Compose的工作分为三个阶段：组合（Composition）→ 布局（Layout）→ 绘制（Drawing）。每个阶段中的状态读取只会触发该阶段及后续阶段的工作。
  2. 重组（Recomposition）频繁且低成本——但前提是你要帮助编译器跳过未变化的作用域。使用稳定类型，避免在可组合函数体内分配对象。
  3. Modifier的顺序很重要。
    Modifier.padding(16.dp).background(Color.Red)
    的视觉效果与
    Modifier.background(Color.Red).padding(16.dp)
    不同。
  4. 状态应尽可能放在低层，仅在需要时才向上提升。不要为了方便就把所有东西都放在ViewModel里。
  5. 副作用（Side effects）的存在是为了衔接Compose的声明式世界与命令式API。要为场景选择合适的副作用——误用会导致难以排查的bug。
  6. Compose Multiplatform共享运行时，但不共享平台实现。
    commonMain
    中的UI代码是可移植的。平台特定的API（
    LocalContext
    、
    BackHandler
    、
    Window
    ）需要使用
    expect
    /
    actual
    或条件源集。

Source Code Receipts

源码凭证

Beyond the guidance docs, this skill bundles the actual source code from 
androidx/androidx
(branch: 
androidx-main
) and 
JetBrains/compose-multiplatform-core
(branch: 
jb-main
). When you need to verify how something works internally, or the user asks "show me the actual implementation", read the raw source from 
references/source-code/
:
ModuleSource ReferenceKey Files Inside
Runtime
references/source-code/runtime-source.md
Composer.kt, Recomposer.kt, State.kt, Effects.kt, CompositionLocal.kt, Remember.kt, SlotTable.kt, Snapshot.kt
UI
references/source-code/ui-source.md
AndroidCompositionLocals.android.kt, Modifier.kt, Layout.kt, LayoutNode.kt, ModifierNodeElement.kt, DrawModifier.kt
Foundation
references/source-code/foundation-source.md
LazyList.kt, LazyGrid.kt, BasicTextField.kt, Clickable.kt, Scrollable.kt, Pager.kt
Material3
references/source-code/material3-source.md
MaterialTheme.kt, ColorScheme.kt, Button.kt, Scaffold.kt, TextField.kt, NavigationBar.kt
Navigation
references/source-code/navigation-source.md
NavHost.kt, ComposeNavigator.kt, NavGraphBuilder.kt, DialogNavigator.kt
CMP
references/source-code/cmp-source.md
Window.kt, ComposeUIViewController.kt, UIKitView.kt, ComposeViewport.kt, ResourceReader.kt
除了指导文档外，本技能还打包了来自
androidx/androidx
（分支：
androidx-main
）和
JetBrains/compose-multiplatform-core
（分支：
jb-main
）的真实源码。当你需要验证内部实现逻辑，或用户要求“给我看实际实现”时，请从
references/source-code/
目录读取源码：
模块源码参考文件包含的关键文件
Runtime
references/source-code/runtime-source.md
Composer.kt、Recomposer.kt、State.kt、Effects.kt、CompositionLocal.kt、Remember.kt、SlotTable.kt、Snapshot.kt
UI
references/source-code/ui-source.md
AndroidCompositionLocals.android.kt、Modifier.kt、Layout.kt、LayoutNode.kt、ModifierNodeElement.kt、DrawModifier.kt
Foundation
references/source-code/foundation-source.md
LazyList.kt、LazyGrid.kt、BasicTextField.kt、Clickable.kt、Scrollable.kt、Pager.kt
Material3
references/source-code/material3-source.md
MaterialTheme.kt、ColorScheme.kt、Button.kt、Scaffold.kt、TextField.kt、NavigationBar.kt
Navigation
references/source-code/navigation-source.md
NavHost.kt、ComposeNavigator.kt、NavGraphBuilder.kt、DialogNavigator.kt
CMP
references/source-code/cmp-source.md
Window.kt、ComposeUIViewController.kt、UIKitView.kt、ComposeViewport.kt、ResourceReader.kt

Two-layer approach

两层使用方法

  1. Start with guidance — read the topic-specific reference (e.g., 
    references/state-management.md
    )
  2. Go deeper with source — if the user wants receipts or you need to verify, read from 
    references/source-code/
  1. 从指导文档开始——先阅读对应主题的参考文件（例如
    references/state-management.md
    ）
  2. 用源码深入验证——如果用户需要凭证或你需要确认实现时，再阅读
    references/source-code/
    中的源码

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/
├── tv/tv-material/src/main/java/androidx/tv/material3/
└── tv/tv-foundation/src/main/java/androidx/tv/foundation/

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/
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/
├── tv/tv-material/src/main/java/androidx/tv/material3/
└── tv/tv-foundation/src/main/java/androidx/tv/foundation/

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/