compose-expert

分类: 开发与编程 | 上传者: aldefy | 下载: 0 | 版本: v1.0（最新）

Compose 和 Compose 跨 Android、桌面、iOS 和 Web 的 UI 开发的多平台专家技能。指导状态管理、视图合成、动画、导航、性能、设计到代码工作流程和生产崩溃模式。由 androidx/androidx 和 JetBrains/compose-multiplatform-core 的实际源代码分析提供支持。每当用户提到 Compose、@Composable、remember、LaunchedEffect、Scaffold、NavHost、MaterialTheme、LazyColumn、Modifier、recomposition、Style、styleable、MutableStyleState、Compose Multiplatform、CMP、KMP、commonMain、expect、actual、ComposeUIViewController、Window composable、UIKitView、ComposeViewport、Res.drawable、Res.string 或任何 Compose API 时，请使用此技能。当用户说“Android UI”、“Kotlin UI”、“撰写布局”、“撰写导航”、“撰写动画”、“material3”、“撰写样式”、“撰写多平台”、“桌面撰写”、“iOS 撰写”、“撰写 Web”、“设计撰写”、“构建此 UI”、“实现此设计”或询问现代 Kotlin UI 开发模式时也会触发。即使是随意提及“我的撰写屏幕很慢”或“如何在屏幕之间传递数据”也应该触发此技能。 --- # Compose 专家技能跨 Android、桌面、iOS 和 Web 编写正确、高性能 Compose 代码的非主观实用指南。涵盖 Jetpack Compose 和 Compose Multiplatform。以对“androidx/androidx”和“JetBrains/compose-multiplatform-core”的实际源代码的分析为支持。 ## 工作流程在帮助编写代码时，请遵循以下清单：### 1. 了解请求 - 涉及哪个 Compose 层？（运行时、UI、基础、Material3、导航） - 这是状态问题、布局问题、性能问题还是架构问题？ - 这是仅限 Android 还是 Compose Multiplatform (CMP)？ ### 2. 分析设计（如果提供视觉参考） - 如果用户共享 Figma 框架、屏幕截图或设计规范，请查阅 `references/design-to-compose.md` - 分解

更新日志: Source: GitHub https://github.com/aldefy/compose-skill

目录结构

当前层级: tree/master/jetpack-compose-expert-skill/

📁 references/
- 📁 source-code/
  - 📄 cmp-source.md 17.8 KB
  - 📄 foundation-source.md 560.9 KB
  - 📄 material3-source.md 836.1 KB
  - 📄 navigation-source.md 118.8 KB
  - 📄 runtime-source.md 449.0 KB
  - 📄 ui-source.md 313.1 KB
- 📄 accessibility.md 10.9 KB
- 📄 animation.md 41.3 KB
- 📄 composition-locals.md 6.8 KB
- 📄 deprecated-patterns.md 8.3 KB
- 📄 design-to-compose.md 23.5 KB
- 📄 lists-scrolling.md 13.6 KB
- 📄 modifiers.md 9.5 KB
- 📄 multiplatform.md 20.5 KB
- 📄 navigation.md 9.7 KB
- 📄 performance.md 15.4 KB
- 📄 platform-specifics.md 17.9 KB
- 📄 production-crash-playbook.md 24.2 KB
- 📄 side-effects.md 12.5 KB
- 📄 state-management.md 16.4 KB
- 📄 styles-experimental.md 14.5 KB
- 📄 theming-material3.md 7.9 KB
- 📄 view-composition.md 19.6 KB
📄 SKILL.md 8.2 KB

SKILL.md

---
name: compose-expert
description: >
  Compose and Compose Multiplatform expert skill for UI development across Android, Desktop,
  iOS, and Web. Guides state management, view composition, animations, navigation, performance,
  design-to-code workflows, and production crash patterns. Backed by actual source code analysis
  from both androidx/androidx and JetBrains/compose-multiplatform-core.
  Use this skill whenever the user mentions Compose, @Composable, remember, LaunchedEffect,
  Scaffold, NavHost, MaterialTheme, LazyColumn, Modifier, recomposition, Style, styleable,
  MutableStyleState, Compose Multiplatform, CMP, KMP, commonMain, expect, actual,
  ComposeUIViewController, Window composable, UIKitView, ComposeViewport, Res.drawable,
  Res.string, or any Compose API. Also trigger when the user says "Android UI", "Kotlin UI",
  "compose layout", "compose navigation", "compose animation", "material3", "compose styles",
  "compose multiplatform", "desktop compose", "iOS compose", "compose web", "design to compose",
  "build this UI", "implement this design", or asks about modern Kotlin UI development patterns.
  Even casual mentions like "my compose screen is slow" or "how do I pass data between screens"
  should trigger this skill.
---

# 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. Understand the request
- 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)?

### 2. 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 using the 5-step methodology
- Map design tokens to MaterialTheme, spacing to CompositionLocals
- Identify animation needs and consult `references/animation.md` for recipes

### 3. Consult the right reference
Read the relevant reference file(s) from `references/` before answering:

| Topic | Reference File |
|-------|---------------|
| `@State`, `remember`, `mutableStateOf`, state hoisting, `derivedStateOf`, `snapshotFlow` | `references/state-management.md` |
| Structuring composables, slots, extraction, preview | `references/view-composition.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` |
| `MaterialTheme`, `ColorScheme`, dynamic color, `Typography`, shapes | `references/theming-material3.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` |

### 4. Apply and verify
- 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

### 5. Cite the source
When referencing Compose internals, point to the exact source file:
```
// 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.

## 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/`:

| Module | Source Reference | Key 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 |

### 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/`

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

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

登录后下载/点赞/收藏 ❤ 317 | ★ 0

compose-expert

目录结构

SKILL.md

举报内容

提示