Compose Multiplatform Patterns
monta-app/ocpp-emulator
Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.
Jetpack Compose 官方示例与最佳实践参考。涵盖 Compose UI 实现、动画、手势、导航、Material3 主题、 性能优化、测试等所有方面。安卓开发第一要义：参考官方文档和案例！
Install Android Compose Reference
$ npx skills add Kototoro-app/Kototoro --skill android-compose-reference -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Kototoro-app/Kototoro android-compose-reference --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Kototoro-app/Kototoro.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.pi/skills/android-compose-reference .claude/skills/android-compose-reference && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "android-compose-reference" agent skill from https://github.com/Kototoro-app/Kototoro/tree/devel/.pi/skills/android-compose-reference into .claude/skills/android-compose-reference/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-compose-reference", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Kototoro-app/Kototoro/tree/devel/.pi/skills/android-compose-referenceType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Kototoro-app/Kototoro --skill android-compose-reference -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Kototoro-app/Kototoro android-compose-reference --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kototoro-app/Kototoro.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.pi/skills/android-compose-reference .agents/skills/android-compose-reference && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "android-compose-reference" agent skill from https://github.com/Kototoro-app/Kototoro/tree/devel/.pi/skills/android-compose-reference into .agents/skills/android-compose-reference/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-compose-reference", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Kototoro-app/Kototoro --skill android-compose-reference -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Kototoro-app/Kototoro android-compose-reference --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kototoro-app/Kototoro.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.pi/skills/android-compose-reference .cursor/skills/android-compose-reference && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "android-compose-reference" agent skill from https://github.com/Kototoro-app/Kototoro/tree/devel/.pi/skills/android-compose-reference into .cursor/skills/android-compose-reference/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-compose-reference", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Kototoro-app/Kototoro.git --path .pi/skills/android-compose-reference--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Kototoro-app/Kototoro --skill android-compose-reference -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Kototoro-app/Kototoro android-compose-reference --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kototoro-app/Kototoro.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.pi/skills/android-compose-reference .gemini/skills/android-compose-reference && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "android-compose-reference" agent skill from https://github.com/Kototoro-app/Kototoro/tree/devel/.pi/skills/android-compose-reference into .gemini/skills/android-compose-reference/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-compose-reference", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Kototoro-app/Kototoro android-compose-referenceInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Kototoro-app/Kototoro --skill android-compose-reference -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Kototoro-app/Kototoro.git skills-src && mkdir -p .github/skills && cp -r skills-src/.pi/skills/android-compose-reference .github/skills/android-compose-reference && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "android-compose-reference" agent skill from https://github.com/Kototoro-app/Kototoro/tree/devel/.pi/skills/android-compose-reference into .github/skills/android-compose-reference/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-compose-reference", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Kototoro-app/Kototoro --skill android-compose-reference -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Kototoro-app/Kototoro android-compose-reference --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Kototoro-app/Kototoro.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.pi/skills/android-compose-reference .opencode/skills/android-compose-reference && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "android-compose-reference" agent skill from https://github.com/Kototoro-app/Kototoro/tree/devel/.pi/skills/android-compose-reference into .opencode/skills/android-compose-reference/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "android-compose-reference", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
android-compose-reference- GitHub stars
- 602
- Token cost
- ~1.3k tokens
- SKILL.md length
- 242 words
- Files
- 1
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Jetpack Compose 官方示例与最佳实践参考。涵盖 Compose UI 实现、动画、手势、导航、Material3 主题、 性能优化、测试等所有方面。安卓开发第一要义：参考官方文档和案例！
- Works in 5 steps: compose-samples ⭐23.2k → nowinandroid ⭐21.4k → architecture-samples ⭐45.7k → …
- Tasks that involve Android development
- SKILL.md covers 📦 核心官方仓库, 🧭 导航 (Navigation), 🎨 Material3 主题 and 🎬 动画, plus 5 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Android Compose Reference is an agent skill from Kototoro-app/Kototoro. Jetpack Compose 官方示例与最佳实践参考。涵盖 Compose UI 实现、动画、手势、导航、Material3 主题、 性能优化、测试等所有方面。安卓开发第一要义：参考官方文档和案例！ Triggers: "Compose 怎么写", "Compose 动画", "Compose 导航", "Compose 性能", "Compose 主题", "Jetpack Compose sample", "Material3 Compose", "Compose testing", "Compose best practice"
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Mobile, covering Android development. It works with Jetpack Compose and Android. The repository describes itself as: Manga, Novel, and Video reader for Android. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Android development
Example prompts
- “Compose 怎么写”
- “Compose 动画”
- “Compose 导航”
- “/android-compose-reference”
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 3df24c7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are kotlin).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
github.comdeveloper.android.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Android Compose Reference loads about 1.3k tokens when it runs. Until then it costs about 74 tokens; SKILL.md has 242 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Kototoro-app/Kototoro at commit 3df24c7, republished under its Apache-2.0 licence (© Kototoro-app). 242 words, ~1,294 tokens.
Download SKILL.mdSave it as
.claude/skills/android-compose-reference/SKILL.md (or your agent's skills folder).- name
- android-compose-reference
- description
- Jetpack Compose 官方示例与最佳实践参考。涵盖 Compose UI 实现、动画、手势、导航、Material3 主题、 性能优化、测试等所有方面。安卓开发第一要义：参考官方文档和案例！ Triggers: "Compose 怎么写", "Compose 动画", "Compose 导航", "Compose 性能", "Compose 主题", "Jetpack Compose sample", "Material3 Compose", "Compose testing", "Compose best practice"
Jetpack Compose 官方参考索引
安卓开发第一要义：参考官方文档和案例！
Compose 是现代 Android UI 开发的推荐方式。以下仓库由 Android 团队维护， 是学习 Compose 最佳实践的第一手资料。
📦 核心官方仓库
1. compose-samples ⭐23.2k
官方的 Jetpack Compose 示例集合 — Compose 学习首选仓库。
内含多个完整应用示例：
| 示例应用 | 展示内容 |
|---|---|
| JetNews | 新闻阅读应用 — Compose 基础：列表、导航、主题 |
| Jetchat | 聊天应用 — 高级 Compose：动画、状态提升、自定义布局 |
| JetSnack | 电商应用 — 复杂布局、图片处理、BottomSheet |
| Crane | 旅行应用 — Material3、自定义绘制、MapView 集成 |
| Owl | 教育应用 — 自定义主题、深色模式、复杂排版 |
| Reply | 邮件应用 — 自适应布局（手机/平板/折叠屏）、WindowSizeClass |
关键学习路径：
compose-samples/
├── JetNews/ # 💡 新手入门：基础 Compose
├── Crane/ # 🎨 Material3 + 自定义主题
├── Jetchat/ # 🚀 进阶：动画 + 状态管理
├── Reply/ # 📱 自适应布局
└── Owl/ # 🎭 高级主题定制2. nowinandroid ⭐21.4k
生产级 Compose 应用 — 架构参考首选。
展示内容：
- 完整的 Compose + Material3 应用
- 模块化架构（
:core:ui,:feature:*,:core:data等） - UDF (Unidirectional Data Flow) 模式
- Gradle 版本目录（Version Catalog）
- 完整的 CI/CD 流程
- Compose 测试（UI 测试 + 截图测试）
3. architecture-samples ⭐45.7k
架构模式演进 — 理解 Compose 时代的架构。
关键分支：
main：UDF + StateFlow，当前推荐views：经典 View 架构compose：Compose 架构演进
4. sunflower ⭐17.8k
View → Compose 迁移 — 适合从 View 迁移到 Compose 的项目。
展示 View 代码如何逐步迁移到 Compose。
5. user-interface-samples ⭐4.6k
UI 专项示例 — 深入 UI 细节。
关键示例：
WindowInsetsAnimation— 键盘动画、系统栏适配MotionLayout— 复杂交互动画CustomLayout— 自定义 Compose LayoutAccessibility— 无障碍Insets— WindowInsets 处理
🧭 导航 (Navigation)
| 仓库 | 说明 |
|---|---|
| nav3-recipes ⭐1.3k | Navigation3 常见用例：类型安全导航、深层链接、BottomNavigation 集成、返回栈管理等 |
| codelab-android-navigation ⭐633 | Navigation Codelab |
Navigation3 类型安全导航（推荐）：
// 定义路由（类型安全，无需字符串）
@Serializable data class Profile(val id: String)
// 导航
navController.navigate(Profile(id = "123"))🎨 Material3 主题
参考仓库：
- compose-samples/Crane — Material3 颜色方案
- compose-samples/Owl — 自定义主题
- nowinandroid — 生产级主题配置
官方文档：Material Design 3 for Compose
🎬 动画
参考仓库：
- compose-samples/Jetchat — 复杂动画
- user-interface-samples — WindowInsetsAnimation
Compose 动画 API 层级：
animate*AsState → 简单属性动画（推荐起手）
AnimatedVisibility → 显示/隐藏动画
AnimatedContent → 内容切换动画
Crossfade → 淡入淡出
updateTransition → 多属性协同动画
rememberInfiniteTransition → 无限循环动画
AnimationSpec → 自定义动画曲线（tween, spring, keyframes）🧪 Compose 测试
参考仓库：testing-samples ⭐9.3k
Compose 测试三件套：
// 1. 元素查找
composeTestRule.onNodeWithText("Submit")
// 2. 交互
composeTestRule.onNodeWithText("Submit").performClick()
// 3. 断言
composeTestRule.onNodeWithText("Success").assertIsDisplayed()含截图测试（Screenshot Testing）、语义测试等高级主题。
⚡ Compose 性能
参考仓库：performance-samples ⭐1.4k
关键主题：
- Baseline Profile — 提升 Compose 首帧速度
- Stability 标记 — 使用
@Stable/@Immutable - 重组优化 — 减少不必要的重组
- 延迟布局 —
LazyColumn/LazyRow优化 - remember/derivedStateOf — 状态缓存
- Compose Compiler Metrics — 编译期分析
📱 自适应布局
| 仓库 | 说明 |
|---|---|
| adaptive-apps-samples | 自适应布局示例 |
| large-screen-codelabs | 大屏/折叠屏适配 |
关键 API：
WindowSizeClass— 根据窗口尺寸调整布局BoxWithConstraints— 约束感知布局LocalConfiguration.current— 配置变化响应
🚀 本项目 (Kototoro) Compose 开发工作流
当需要实现 Compose 相关功能时:
1. compose-samples 中搜索相似 UI → 找到参考实现
2. nowinandroid 中搜索架构模式 → 理解状态管理
3. user-interface-samples 中搜索细节 → 手势/Insets/动画
4. 在官方实现基础上适配 → 而非从零开始禁止：从非官方博客/教程中复制代码而不验证。任何第三方方案都要和官方示例对比。
📚 补充链接
© Kototoro-app, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .pi/skills/android-compose-reference of Kototoro-app/Kototoro.
Open the folder on GitHubat commit 3df24c7
Compare with similar skills
Android Compose Reference next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Android Compose Reference this skillKototoro-app/Kototoro | 602 | — | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| Compose Multiplatform Patternsmonta-app/ocpp-emulator | 179 | 5 repos | ~2k | Automated safety check: Pass | Apache-2.0 | |
| Android Developmentdpconde/claude-android-skill | 336 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Stylesarindamxd/camerax-android | 132 | 4 repos | ~2.3k | Automated safety check: Pass | Apache-2.0 | |
| Benchmarkandroidx/androidx | 6.1k | — | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| Mobile Android Designopenvetta/open-vetta | 290 | 3 repos | ~950 | Automated safety check: Pass | Apache-2.0 |
Similar skills
Android Development
dpconde/claude-android-skill
Create production-quality Android applications following Google's official architecture guidance and NowInAndroid best practices.
Styles
arindamxd/camerax-android
A skill your agent uses to integrate the Jetpack Compose Styles API into an Android project.
Benchmark
androidx/androidx
Benchmarking and improving the performance of Jetpack Compose.
Mobile Android Design
openvetta/open-vetta
Master Material Design 3 and Jetpack Compose patterns for building native Android apps.
Generating Baseline Profiles
rosuH/EasyWatermark
A skill your agent uses to generate and measure Jetpack Compose Baseline Profiles end-to-end with the AGP 8.2+ Baseline Profile Generator module and the Macrobenchmark harness.
More from Kototoro-app/Kototoro
All 10 skills in this repoAndroid Architecture Reference
Kototoro-app/Kototoro
Android 架构、依赖注入、数据层、测试规范官方参考。涵盖 UDF/MVI 模式、Hilt/Dagger、Room、Paging、 DataStore、WorkManager、ViewModel、测试策略等。安卓开发第一要义：参考官方文档和案例！
Android Official Samples
Kototoro-app/Kototoro
Android 官方示例代码库完整索引。涵盖架构、Compose UI、性能、测试、存储、网络、相机、媒体、安全等所有领域。
Compose Idle Redraw
Kototoro-app/Kototoro
诊断 Kototoro 主壳"空闲永不定居"式 Compose 自持重绘循环（idle 帧数不为 0）. An agent skill from Kototoro-app/Kototoro.
Kototoro Browse Source Scroll
Kototoro-app/Kototoro
Diagnose and fix Kototoro Browse/Explore page content source scrolling jank when many sources exist.
Kototoro Details Return Stability
Kototoro-app/Kototoro
Diagnose and fix Kototoro Android issues where returning from reader or video player to details causes flicker, cover reload, panorama reload, progress reset, status bar jump, Compose subtree…
Kototoro Main Loading Stability
Kototoro-app/Kototoro
Diagnose and fix Kototoro main screen loading flicker, blank flashes, chrome jumps, transient empty states, and route switching flashes.
Related
Works with
Categories
Questions about Android Compose Reference
What does Android Compose Reference do?
Jetpack Compose 官方示例与最佳实践参考。涵盖 Compose UI 实现、动画、手势、导航、Material3 主题、 性能优化、测试等所有方面。安卓开发第一要义：参考官方文档和案例！. Android Compose Reference is an agent skill from Kototoro-app/Kototoro.
When should I use Android Compose Reference?
Android Compose Reference fits situations like: tasks that involve Android development.
How do I install Android Compose Reference in Claude Code?
Run `npx skills add Kototoro-app/Kototoro --skill android-compose-reference -a claude-code`. Or copy the skill folder (.pi/skills/android-compose-reference in Kototoro-app/Kototoro) into .claude/skills/android-compose-reference in your project. Claude Code loads it when a task matches its description.
How do I install Android Compose Reference in Codex?
Run `npx skills add Kototoro-app/Kototoro --skill android-compose-reference -a codex`. Or copy the skill folder (.pi/skills/android-compose-reference in Kototoro-app/Kototoro) into .agents/skills/android-compose-reference in your project. Codex loads it when a task matches its description.
Can I use Android Compose Reference in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Kototoro-app/Kototoro --skill android-compose-reference -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/android-compose-reference, .gemini/skills/android-compose-reference, .github/skills/android-compose-reference and .opencode/skills/android-compose-reference in your project.
What does Android Compose Reference need to run?
SKILL.md names no scripts, command-line tools or credentials: Android Compose Reference is instructions for the agent only.
Does Android Compose Reference access the network?
SKILL.md names 2 domains. As links in the text: github.com and developer.android.com. This is read from the text; nothing was executed.
Is Android Compose Reference safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Android Compose Reference use?
Android Compose Reference is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Android Compose Reference use?
About 1.3k tokens (SKILL.md is roughly 5.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Android Compose Reference?
Skills that share tags, products or a category with Android Compose Reference: Compose Multiplatform Patterns (monta-app/ocpp-emulator, 179 stars), Android Development (dpconde/claude-android-skill, 336 stars), Styles (arindamxd/camerax-android, 132 stars) and Benchmark (androidx/androidx, 6.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Android Compose Reference?
Kototoro-app (a GitHub organization) maintains it in Kototoro-app/Kototoro, which has 602 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 7, 2026.
Source: Kototoro-app/Kototoro on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.