compose-skill

作者 Meet-Miyani已验证

AI agent skill for Jetpack Compose & Compose Multiplatform (KMP/CMP). MVI architecture, Navigation 3, Koin/Hilt, Ktor, Room, DataStore, Paging 3, Coil, coroutines/Flow, animations, performance, accessibility, testing, and cross-platform patterns. Works with Codex, Cursor, Claude Code.

270
Stars
20
Forks
Shell
语言
2026/8/23
添加时间

⚠️ 第三方软件声明

本 Skill 为第三方开源软件,独立托管于 GitHub。SkillTip 仅为信息目录,不控制或维护底层仓库。所显示的安全检查为自动化且范围有限,安装前请自行审查源码。

阅读服务条款

安装

添加到你的 Claude Code skills 目录:

# Add to your Claude Code skills
git clone https://github.com/Meet-Miyani/compose-skill

快速入门

使用 compose-skill 等 Skills 的指南。

安全报告

已验证

上次扫描:—

{
  "status": "PASSED",
  "issues": []
}

README.md

Compose Multiplatform icon

compose-skill

Make your AI coding tool actually understand Compose.
A comprehensive agent skill for Jetpack Compose and Compose Multiplatform (KMP/CMP).

setup 5 min Jetpack Compose 1.8+ Kotlin 2.0+ Compose Multiplatform 1.7+ Agent Skills standard


What This Skill Does

This is an AI agent skill — not a library, not documentation. Install it once, and your AI coding agent (Codex, Cursor, Claude Code) gains production-grade knowledge of the entire Compose app development lifecycle: architecture, UI, state, navigation, networking, persistence, performance, accessibility, cross-platform, build configuration, distribution, and code review.

The skill covers Android, iOS, Desktop, and Web targets with the same architectural principles.

What's Covered

🏗️ Architecture & State🎨 Compose UI🌐 Data & Networking
MVI with Event, State, Effect
Unidirectional data flow
ViewModel patterns
State modeling (4 buckets)
Clean code & anti-patterns
Three-phase model & side effects
Coil 3 image loading
Lists, grids, pagers & keying
Shared element animations
Material 3 theming & adaptive
Ktor HTTP client & auth flows
DTO-to-domain mapping
Room Database (KMP)
DataStore (Preferences & Typed)
Paging 3 with MVI
🧭 Navigation & DI⚡ Performance & Quality📱 Cross-Platform
Navigation 3 & Nav 2
Tabs, scenes, deep links
Koin (CMP) & Hilt (Android)
ViewModel scoping
Recomposition minimization
Compiler Metrics & profiles
Turbine testing
Macrobenchmark & UI tests
Accessibility & WCAG
KMP commonMain sharing
expect/actual patterns
iOS interop (SKIE)
CMP resources & localization
Gradle/AGP 9+, CI/CD, signing

Without vs With compose-skill

ConcernWithoutWith
State managementScattered mutableStateOf in composablesSingle StateFlow<State> owned by ViewModel
Business logicMixed into UI layerIsolated in ViewModel's onEvent() handler
One-shot actionsBoolean flags in stateChannel<Effect> for navigation, snackbar
RecompositionFrequent, hard to diagnoseMinimized via state shape and read boundaries
NavigationAd-hoc calls from composablesSemantic effects, route layer executes
NetworkingInconsistent error handlingKtor + Result/ApiResult wrapper, DTO mappers
PersistenceRaw SharedPreferencesDataStore + Room with MVI integration
AccessibilityMissing or incorrect semanticscontentDescription, touch targets, WCAG contrast
Cross-platformAndroid-only or inconsistentcommonMain with expect/actual for platform APIs
Build configHardcoded versionsVersion catalog, AGP 9+ patterns, conventions
TestingManual UI testingViewModel event→state→effect via Turbine
Code reviewInconsistent patternsAnti-pattern detection with documented fixes

Installation

Pick your agent and run one command. The clone target becomes the skill folder — agents detect SKILL.md at the root automatically.

Only three things matter for the skill to work: SKILL.md, agents/, and references/. Everything else in this repo (README, LICENSE, scripts, assets, .github) is for documentation, validation, and CI — the agent never reads them. If you prefer a minimal install, you only need those three.

Why is SKILL.md at the root? All three agents (Codex, Cursor, Claude Code) look for SKILL.md at the top level of the skill directory. This repo is structured so that cloning it directly into the skill path gives you a ready-to-use skill — no moving files or extra nesting required.

Skill installation paths may change as agents evolve. The locations below are accurate at the time of writing — for the latest instructions, refer to each agent's official docs or ask your agent "How do I add a skill?"

Quick Install (copy-paste)

ClientUser-globalPer-repo
Codex~/.codex/skills/compose-skill.codex/skills/compose-skill
Cursor~/.cursor/skills/compose-skill.cursor/skills/compose-skill
Claude Code~/.claude/skills/compose-skill.claude/skills/compose-skill
Other agentsUpload SKILL.md, agents/, and references/ as project knowledge
# Replace <path> with the install location from the table above
git clone https://github.com/Meet-Miyani/compose-skill.git <path>

# Examples:
git clone https://github.com/Meet-Miyani/compose-skill.git ~/.cursor/skills/compose-skill
git clone https://github.com/Meet-Miyani/compose-skill.git .codex/skills/compose-skill

Common Mistakes

ProblemFix
Folder named compose-skill-mainRename to compose-skill (GitHub ZIP downloads add -main)
SKILL.md not at root of skill folderDon't nest inside another directory — clone directly into the skill path
Skill not detected after installRestart the agent / IDE

Verify Activation

ClientHow to verify
CodexRun /skillscompose-skill appears in the list
CursorSettings → Rules — skill appears under Agent Decides
Claude CodeRun /skills or ask "What skills are available?"

Usage

Once installed, the skill activates automatically when your prompt matches its triggers (@Composable, StateFlow, ViewModel, KMP, Ktor, recomposition, DataStore, etc.). You can also invoke it explicitly — the syntax varies by client:

ClientExplicit invocationAutomatic
Codex CLI$compose-skill in your promptYes
Codex IDE extension$compose-skill in chatYes
Codex App/compose-skill in chatYes
Cursor/compose-skill in Agent chatYes
Claude Code/compose-skill in chatYes

Invocation Examples

Codex CLI / IDE extension — dollar-sign prefix:

$compose-skill Refactor this screen to MVI with proper state modeling.

Codex App / Cursor / Claude Code — slash prefix:

/compose-skill How do I set up Paging 3 with MVI in a KMP project?

Skill Structure

compose-skill/
│
│   ## Required (the skill itself) ─────────────────────
├── SKILL.md                            # Skill definition — agent reads this
├── agents/
│   └── openai.yaml                     # Codex UI metadata
└── references/                         # 37 deep-dive reference files
    │                                   #   (loaded on-demand by SKILL.md)
    ├── architecture.md
    ├── coroutines-flow.md
    ├── compose-essentials.md
    ├── material-design.md
    ├── image-loading.md
    ├── lists-grids.md
    ├── paging.md
    ├── paging-offline.md
    ├── paging-mvi-testing.md
    ├── navigation.md
    ├── navigation-3.md
    ├── navigation-2.md
    ├── navigation-3-di.md
    ├── navigation-2-di.md
    ├── navigation-migration.md
    ├── performance.md
    ├── animations.md
    ├── ui-ux.md
    ├── testing.md
    ├── room-database.md
    ├── datastore.md
    ├── networking-ktor.md
    ├── networking-ktor-auth.md
    ├── networking-ktor-testing.md
    ├── networking-ktor-architecture.md
    ├── dependency-injection.md
    ├── koin.md
    ├── hilt.md
    ├── cross-platform.md
    ├── resources.md
    ├── ios-swift-interop.md
    ├── accessibility.md
    ├── clean-code.md
    ├── anti-patterns.md
    ├── gradle-build.md
    └── ci-cd-distribution.md
│
│   ## Optional (repo extras) ──────────────────────────
├── README.md                           # This file (not read by agents)
├── LICENSE                             # MIT License
├── assets/
│   └── compose-multiplatform-icon.svg  # Logo for README
└── scripts/
    └── validate.sh                     # Skill scanner / validation tool

Reference Guide

The references/ directory contains 37 deep-dive files that the skill loads on-demand. Here's what each one covers in detail:

Kotlin Foundations
ReferenceWhat's Inside
coroutines-flow.mdStateFlow vs SharedFlow vs Channel decision table, Flow operators (flatMapLatest, combine, debounce, catch), Dispatchers (IO/Default/Main), structured concurrency (viewModelScope, supervisorScope), exception handling, CancellationException, stateIn/shareIn, backpressure (buffer/conflate/collectLatest), callbackFlow, Mutex/Semaphore, testing with Turbine
Architecture
ReferenceWhat's Inside
architecture.mdViewModel/event-handling pipeline, state modeling, Channel vs SharedFlow for effects, domain layer rules, inter-feature communication (event bus, feature API contracts), module dependency rules, GOOD/BAD code examples
clean-code.mdAvoiding overengineering, file organization, naming conventions, disciplined vs bloated MVI comparison
anti-patterns.mdCross-cutting anti-pattern quick-reference table with "why it hurts" and "better replacement" for each, plus routing index to domain-specific anti-patterns in other reference files
Compose APIs
ReferenceWhat's Inside
material-design.mdM3 theme setup (dynamic color, dark/light, color roles), typography/shapes, component decisions (Scaffold, TopAppBar, NavigationBar/Rail/Suite, BottomSheet, Snackbar, Dialog), adaptive layouts (window size classes, canonical layouts), M2→M3 migration
image-loading.mdCoil 3 setup for Compose/CMP, AsyncImage/rememberAsyncImagePainter/SubcomposeAsyncImage decision guide, placeholder/error/fallback/crossfade, memory/disk/network cache policy, transformations vs Modifier.clip, SVG (coil-svg), Res.getUri resource loading
compose-essentials.mdThree phases model, state primitives, side effects (LaunchedEffect, DisposableEffect, rememberUpdatedState), modifier ordering, graphicsLayer, slot pattern, CompositionLocal, collectAsStateWithLifecycle
lists-grids.mdLazyColumn/LazyRow, keys, contentType, grids, pager, scroll state, nested scrolling, list anti-patterns
paging.mdPagingSource, Pager + ViewModel setup (PagingData as separate Flow, never in UiState), cachedIn, filter/search with flatMapLatest, LazyPagingItems (all lazy layouts), LoadState handling, PagingData transformations, PagingSource.invalidate()
paging-offline.mdRemoteMediator offline-first with Room, initialize() (LAUNCH_INITIAL_REFRESH vs SKIP_INITIAL_REFRESH), remote keys, Pager wiring
paging-mvi-testing.mdMVI dual-flow pattern (PagingData separate from UiState), route collection, PagingSource unit tests, asSnapshot, TestPager, anti-patterns table
navigation.mdShared navigation concepts: Nav 2 vs Nav 3 decision guide, MVI navigation rules (both versions), anti-patterns table, routing to version-specific files
navigation-3.mdNav 3 full reference: route definition, back stack persistence, NavDisplay full API, top-level tabs (NavigationSuiteScaffold), ViewModel scoping with entry decorators, Scenes (dialog, bottom sheet, list-detail, Material Adaptive), animations, back stack manipulation, deep links, CMP polymorphic serialization
navigation-2.mdNav 2 full reference: NavHost/NavController, type-safe routes (2.8+), string routes, top-level tabs (NavigationBar + currentBackStackEntryAsState + saveState/restoreState), deep links (NavDeepLink), navigate with results (SavedStateHandle), nested graphs, animations (enterTransition/exitTransition), conditional navigation (auth guards), predictive back
navigation-3-di.mdNav 3 + DI wiring: Hilt hiltViewModel in entry blocks + @AssistedInject + multibinding entry providers, Koin navigation<T> DSL + koinEntryProvider(), modularization api/impl split, entry-scoped VMs via decorators
navigation-2-di.mdNav 2 + DI wiring: Hilt hiltViewModel in composable destinations + graph-scoped VMs via getBackStackEntry + SavedStateHandle, Koin koinViewModel + koinNavViewModel + sharedKoinViewModel for graph-scoped sharing
navigation-migration.mdNav 2 to Nav 3 migration: conceptual shift table, step-by-step migration (routes → NavKey, controller → backStack, NavHost → NavDisplay, graph VMs → entry decorators, deep links, tabs), incremental strategy, coexistence
Performance & Quality
ReferenceWhat's Inside
performance.mdThree phases, primitive state specializations, TextFieldState, Strong Skipping Mode, stability config, Compose Compiler Metrics, baseline profiles, API decision table, 20 recomposition rules, diagnostic checklist
animations.mdComplete animation API reference: decision tree, AnimationSpec (spring/tween/keyframes), animate*AsState, Animatable (sequential, concurrent, gesture-driven), updateTransition, AnimatedVisibility, AnimatedContent, shared element transitions with navigation and Coil, swipe-to-dismiss, Canvas/custom drawing, graphicsLayer, performance optimization
ui-ux.mdLoading states, skeleton/shimmer, preserving content during refresh, inline validation, perceived performance
accessibility.mdcontentDescription rules, Modifier.semantics (role, stateDescription, heading), mergeDescendants, clearAndSetSemantics, touch targets (48dp), WCAG color contrast, custom interactive elements, custom accessibility actions
testing.mdTurbine for StateFlow testing, ViewModel event→state→effect testing, validation/UI tests, Macrobenchmark, lean test matrix by app scale
Data & Persistence
ReferenceWhat's Inside
datastore.mdKMP + Android setup, Preferences DataStore keys/read/write, Typed DataStore with JSON serialization, singleton enforcement, corruption handling, SharedPreferences migration, MVI integration, DI wiring, testing, anti-patterns
room-database.mdEntity design, performance-oriented DAOs, indexes, relationships (@Embedded/@Relation/@Junction), TypeConverters, transactions, migrations, MVI integration, anti-patterns
Networking, DI & Cross-Platform
ReferenceWhat's Inside
networking-ktor.mdHttpClient configuration, platform engines, plugins (ContentNegotiation, Retry, Timeout, Logging, ContentEncoding), custom plugins (createClientPlugin), DTOs, mappers, API service (CRUD, multipart), repository pattern, proxy/SSL
networking-ktor-auth.mdBearer token auth with refresh, WebSockets (frames, serialization converter, session), SSE (Server-Sent Events)
networking-ktor-testing.mdMockEngine setup (success, error, request assertions, multiple responses), engine injection, Koin/Hilt DI integration, testing anti-patterns
networking-ktor-architecture.mdResult vs ApiResult decision, safeRequest wrapper, exception classification, plugin composition strategy, client factory design, response observation plugin, debug vs production, architecture anti-patterns
dependency-injection.mdDI decision guide (Hilt vs Koin), shared concepts
koin.mdKoin setup for CMP and Android, module organization, koinViewModel, koinInject, Koin + Nav 3 (navigation<T>, koinEntryProvider), scoped navigation, MVI ViewModel integration, testing
hilt.mdAndroid-only Hilt setup, @HiltViewModel, hiltViewModel(), modules (@Provides/@Binds), scopes, Navigation Compose integration, MVI pattern with Hilt, testing
cross-platform.mdcommonMain vs platform placement, interfaces vs expect/actual, platform bridge patterns (interface+DI, expect/actual, typealias), lifecycle, state restoration, resources, accessibility
ios-swift-interop.mdKotlin→Swift naming, nullability/collection bridging, SKIE setup, suspend→async, Flow→AsyncSequence, sealed class mapping, SwiftUI/UIKit interop (ComposeUIViewController, UIKitView), iOS API design rules
resources.mdAndroid R vs CMP Res comparison, composeResources/ directory structure, Gradle setup, drawable/string/plural/font/raw-file APIs with code examples, qualifiers (language, theme, density), localization, generated resource maps, Android assets interop (Res.getUri), MVI integration
Build, Distribution & CI/CD
ReferenceWhat's Inside
gradle-build.mdAGP 9+ project structure, version catalog ([versions]/[libraries]/[plugins]/[bundles]), bundle patterns, composite builds (includeBuild + dependencySubstitution), private Maven repos, settings.gradle.kts, gradle.properties, module-level build scripts, compileSdk { version = release(N) }, KSP/Room/Koin wiring, convention plugins guidance
ci-cd-distribution.mdGitHub Actions workflows (Android APK, Desktop multi-OS DMG/MSI/DEB), desktop app module setup (compose.desktop), iOS Xcode framework integration, signing/notarization (Android/macOS/iOS), adding JVM desktop target to existing CMP project, Gradle task reference table

Example Prompts

Architecture & State
Refactor this Compose screen to MVI.
How should I structure a KMP feature module with Compose UI and ViewModel?
Audit this feature against the compose-skill and list anti-patterns first, then apply minimal fixes.
UI & Performance
I have too much recomposition in this form screen. What should I change?
Optimize recomposition in this screen and explain each state-shape change.
Add shared element transitions between my list and detail screens.
Data & Networking
Set up Ktor with bearer token auth and refresh for my KMP project.
Should this be SharedFlow or Channel for one-off effects?
How do I use DataStore for user preferences in a KMP app?
Cross-Platform & Distribution
How do I expose this Kotlin StateFlow to Swift using SKIE?
Set up GitHub Actions to build DMG, MSI, and DEB for my desktop app.
Add iOS target to my existing Compose Multiplatform project.
Accessibility & Quality
Review this screen for accessibility issues.
How do I make my custom interactive component accessible?
Set up ViewModel tests with Turbine for this feature.

Official Documentation

Contributing

Contributions are welcome! Whether it's fixing a typo, improving a reference doc, or adding coverage for a new Compose API — all help is appreciated.

  1. Fork the repository
  2. Create a branch for your change (git checkout -b improve-navigation-docs)
  3. Make your changes — keep reference files focused and under 500 lines where possible
  4. Run the scanner to verify everything passes:
    ./scripts/validate.sh
    
  5. Open a pull request with a clear description of what changed and why

Guidelines

  • Follow the agentskills.io specification for any structural changes
  • Keep SKILL.md body under 500 lines — move detailed content to references/
  • Every reference file in references/ should be linked from SKILL.md
  • Use code examples that compile and follow the skill's MVI conventions
  • Don't add dependencies — the skill is pure markdown and bash

License

This project is licensed under the MIT License.


Built for Jetpack Compose and Compose Multiplatform.
Works with Codex, Cursor, Claude Code, and any Agent Skills-compatible tool.

常见问题

What is compose-skill?

compose-skill is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by Meet-Miyani. AI agent skill for Jetpack Compose & Compose Multiplatform (KMP/CMP). MVI architecture, Navigation 3, Koin/Hilt, Ktor, Room, DataStore, Paging 3, Coil, coroutines/Flow, animations, performance, accessibility, testing, and cross-platform patterns. Works with Codex, Cursor, Claude Code. It has 270 GitHub stars.

Is compose-skill safe to use?

Yes. compose-skill passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.

How do I install compose-skill?

Clone the repository with "git clone https://github.com/Meet-Miyani/compose-skill" and add it to your Claude Code skills directory (see the Installation section above). compose-skill ships a SKILL.md manifest, so compatible agents can discover and load it automatically.

What programming language is compose-skill written in?

compose-skill is primarily written in Shell. It is open-source under Meet-Miyani on GitHub, so you can review or fork the full source.

Are there alternatives to compose-skill?

Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh compose-skill against similar tools.

评论 (0)

暂无评论,成为第一个分享想法的人!

ECC

by affaan-m

10

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

242,21936,702JavaScript
AI 智能体ai-agentsanthropicclaude-code
查看详情
15

An agentic skills framework & software development methodology that works.

234,96620,863Shell
AI 智能体ai-agentsbrainstorming
查看详情

hermes-agent

by NousResearch

10

The agent that grows with you

234,43747,175Python
AI 智能体ai-agentsagent-orchestration
查看详情

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

185,94028,768JavaScript
AI 智能体ai-agentsanthropicclaude-code
查看详情

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

128,8688,826Rust
AI 智能体claude-codeai-tools
查看详情

claude-code

by anthropics

Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.

120,03119,897Shell
AI 智能体
查看详情

开发者还喜欢

基于喜欢此 Skill 的开发者投票和收藏

ECC

by affaan-m

10

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

242,21936,702JavaScript
AI 智能体ai-agentsanthropicclaude-code
查看详情
15

An agentic skills framework & software development methodology that works.

234,96620,863Shell
AI 智能体ai-agentsbrainstorming
查看详情

hermes-agent

by NousResearch

10

The agent that grows with you

234,43747,175Python
AI 智能体ai-agentsagent-orchestration
查看详情

n8n

by n8n-io

12

Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.

201,88160,308TypeScript
MCP 服务器apisai-tools
查看详情

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

185,94028,768JavaScript
AI 智能体ai-agentsanthropicclaude-code
查看详情

cc-switch

by farion1231

3

A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io

128,8688,826Rust
AI 智能体claude-codeai-tools
查看详情