{"id":"2805ac94-8b67-4e3f-8496-923768ad3dd2","shortId":"LVEbkH","kind":"skill","title":"android-jetpack-compose-expert","tagline":"Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3.","description":"# Android Jetpack Compose Expert\n\n## Overview\n\nA comprehensive guide for building production-quality Android applications using Jetpack Compose. This skill covers architectural patterns, state management with ViewModels, navigation type-safety, and performance optimization techniques.\n\n## When to Use This Skill\n\n- Use when starting a new Android project with Jetpack Compose.\n- Use when migrating legacy XML layouts to Compose.\n- Use when implementing complex UI state management and side effects.\n- Use when optimizing Compose performance (recomposition counts, stability).\n- Use when setting up Navigation with type safety.\n\n## Step-by-Step Guide\n\n### 1. Project Setup & Dependencies\n\nEnsure your `libs.versions.toml` includes the necessary Compose BOM and libraries.\n\n```kotlin\n[versions]\ncomposeBom = \"2024.02.01\"\nactivityCompose = \"1.8.2\"\n\n[libraries]\nandroidx-compose-bom = { group = \"androidx.compose\", name = \"compose-bom\", version.ref = \"composeBom\" }\nandroidx-ui = { group = \"androidx.compose.ui\", name = \"ui\" }\nandroidx-ui-graphics = { group = \"androidx.compose.ui\", name = \"ui-graphics\" }\nandroidx-ui-tooling-preview = { group = \"androidx.compose.ui\", name = \"ui-tooling-preview\" }\nandroidx-material3 = { group = \"androidx.compose.material3\", name = \"material3\" }\nandroidx-activity-compose = { group = \"androidx.activity\", name = \"activity-compose\", version.ref = \"activityCompose\" }\n```\n\n### 2. State Management Pattern (MVI/MVVM)\n\nUse `ViewModel` with `StateFlow` to expose UI state. Avoid exposing `MutableStateFlow`.\n\n```kotlin\n// UI State Definition\ndata class UserUiState(\n    val isLoading: Boolean = false,\n    val user: User? = null,\n    val error: String? = null\n)\n\n// ViewModel\nclass UserViewModel @Inject constructor(\n    private val userRepository: UserRepository\n) : ViewModel() {\n\n    private val _uiState = MutableStateFlow(UserUiState())\n    val uiState: StateFlow<UserUiState> = _uiState.asStateFlow()\n\n    fun loadUser() {\n        viewModelScope.launch {\n            _uiState.update { it.copy(isLoading = true) }\n            try {\n                val user = userRepository.getUser()\n                _uiState.update { it.copy(user = user, isLoading = false) }\n            } catch (e: Exception) {\n                _uiState.update { it.copy(error = e.message, isLoading = false) }\n            }\n        }\n    }\n}\n```\n\n### 3. Creating the Screen Composable\n\nConsume the state in a \"Screen\" composable and pass data down to stateless components.\n\n```kotlin\n@Composable\nfun UserScreen(\n    viewModel: UserViewModel = hiltViewModel()\n) {\n    val uiState by viewModel.uiState.collectAsStateWithLifecycle()\n\n    UserContent(\n        uiState = uiState,\n        onRetry = viewModel::loadUser\n    )\n}\n\n@Composable\nfun UserContent(\n    uiState: UserUiState,\n    onRetry: () -> Unit\n) {\n    Scaffold { padding ->\n        Box(modifier = Modifier.padding(padding)) {\n            when {\n                uiState.isLoading -> CircularProgressIndicator()\n                uiState.error != null -> ErrorView(uiState.error, onRetry)\n                uiState.user != null -> UserProfile(uiState.user)\n            }\n        }\n    }\n}\n```\n\n## Examples\n\n### Example 1: Type-Safe Navigation\n\nUsing the new Navigation Compose Type Safety (available in recent versions).\n\n```kotlin\n// Define Destinations\n@Serializable\nobject Home\n\n@Serializable\ndata class Profile(val userId: String)\n\n// Setup NavHost\n@Composable\nfun AppNavHost(navController: NavHostController) {\n    NavHost(navController, startDestination = Home) {\n        composable<Home> {\n            HomeScreen(onNavigateToProfile = { id ->\n                navController.navigate(Profile(userId = id))\n            })\n        }\n        composable<Profile> { backStackEntry ->\n            val profile: Profile = backStackEntry.toRoute()\n            ProfileScreen(userId = profile.userId)\n        }\n    }\n}\n```\n\n## Best Practices\n\n- ✅ **Do:** Use `remember` and `derivedStateOf` to minimize unnecessary calculations during recomposition.\n- ✅ **Do:** Mark data classes used in UI state as `@Immutable` or `@Stable` if they contain `List` or other unstable types to enable smart recomposition skipping.\n- ✅ **Do:** Use `LaunchedEffect` for one-off side effects (like showing a Snackbar) triggered by state changes.\n- ❌ **Don't:** Perform expensive operations (like sorting a list) directly inside the Composable function body without `remember`.\n- ❌ **Don't:** Pass `ViewModel` instances down to child components. Pass only the data (state) and lambda callbacks (events).\n\n## Troubleshooting\n\n**Problem:** Infinite Recomposition loop.\n**Solution:** Check if you are creating new object instances (like `List` or `Modifier`) inside the composition without `remember`, or if you are updating state inside the composition phase instead of a side-effect or callback. Use Layout Inspector to debug recomposition counts.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["android","jetpack","compose","expert","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents"],"capabilities":["skill","source-sickn33","skill-android-jetpack-compose-expert","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/android-jetpack-compose-expert","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34964 github stars · SKILL.md body (5,189 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-25T00:50:25.877Z","embedding":null,"createdAt":"2026-04-18T21:30:56.518Z","updatedAt":"2026-04-25T00:50:25.877Z","lastSeenAt":"2026-04-25T00:50:25.877Z","tsv":"'1':114,339 '1.8.2':133 '2':196 '2024.02.01':131 '3':24,276 'activ':186,192 'activity-compos':191 'activitycompos':132,195 'android':2,11,25,38,70 'android-jetpack-compose-expert':1 'androidx':136,148,155,165,177,185 'androidx-activity-compos':184 'androidx-compose-bom':135 'androidx-material3':176 'androidx-ui':147 'androidx-ui-graph':154 'androidx-ui-tooling-preview':164 'androidx.activity':189 'androidx.compose':140,180 'androidx.compose.ui':151,159,170 'applic':39 'appnavhost':372 'architectur':46 'ask':567 'avail':351 'avoid':209 'backstackentri':388 'backstackentry.toroute':392 'best':396 'bodi':465 'bom':125,138,144 'boolean':221 'boundari':575 'box':321 'build':9,34 'calcul':406 'callback':484,526 'catch':267 'chang':450 'check':492 'child':475 'circularprogressind':327 'clarif':569 'class':217,232,363,412 'clear':542 'complex':86 'compon':294,476 'compos':4,15,27,42,74,82,96,124,137,143,187,193,280,287,296,312,348,370,379,387,463 'compose-bom':142 'composebom':130,146 'composit':506,517 'comprehens':31 'constructor':235 'consum':281 'contain':423 'count':99,533 'cover':16,45 'creat':277,496 'criteria':578 'data':216,290,362,411,480 'debug':531 'defin':356 'definit':215 'depend':117 'derivedstateof':402 'describ':546 'design':23 'destin':357 'direct':460 'e':268 'e.message':273 'effect':92,442,524 'enabl':430 'ensur':118 'environ':558 'environment-specif':557 'error':228,272 'errorview':330 'event':485 'exampl':337,338 'except':269 'expens':454 'expert':5,6,28,563 'expos':206,210 'fals':222,266,275 'fun':250,297,313,371 'function':464 'graphic':157,163 'group':139,150,158,169,179,188 'guid':32,113 'guidanc':7 'hiltviewmodel':301 'home':360,378 'homescreen':380 'id':382,386 'immut':418 'implement':85 'includ':121 'infinit':488 'inject':234 'input':572 'insid':461,504,515 'inspector':529 'instanc':472,499 'instead':519 'isload':220,255,265,274 'it.copy':254,262,271 'jetpack':3,14,26,41,73 'kotlin':128,212,295,355 'lambda':483 'launchedeffect':436 'layout':80,528 'legaci':78 'librari':127,134 'libs.versions.toml':120 'like':443,456,500 'limit':534 'list':424,459,501 'loadus':251,311 'loop':490 'manag':18,49,89,198 'mark':410 'match':543 'materi':22 'material3':178,181,183 'migrat':77 'minim':404 'miss':580 'modern':10 'modifi':322,503 'modifier.padding':323 'mutablestateflow':211,244 'mvi/mvvm':200 'name':141,152,160,171,182,190 'navcontrol':373,376 'navcontroller.navigate':383 'navhost':369,375 'navhostcontrol':374 'navig':19,52,105,343,347 'necessari':123 'new':69,346,497 'null':226,230,329,334 'object':359,498 'one':439 'one-off':438 'onnavigatetoprofil':381 'onretri':309,317,332 'oper':455 'optim':58,95 'output':552 'overview':29 'pad':320,324 'pass':289,470,477 'pattern':47,199 'perform':20,57,97,453 'permiss':573 'phase':518 'practic':397 'preview':168,175 'privat':236,241 'problem':487 'product':36 'production-qu':35 'profil':364,384,390,391 'profile.userid':395 'profilescreen':393 'project':71,115 'qualiti':37 'recent':353 'recomposit':98,408,432,489,532 'rememb':400,467,508 'requir':571 'review':564 'safe':342 'safeti':55,108,350,574 'scaffold':319 'scope':545 'screen':279,286 'serializ':358,361 'set':103 'setup':116,368 'show':444 'side':91,441,523 'side-effect':522 'skill':44,64,537 'skill-android-jetpack-compose-expert' 'skip':433 'smart':431 'snackbar':446 'solut':491 'sort':457 'source-sickn33' 'specif':559 'stabil':100 'stabl':420 'start':67 'startdestin':377 'state':17,48,88,197,208,214,283,416,449,481,514 'stateflow':204,248 'stateless':293 'step':110,112 'step-by-step':109 'stop':565 'string':229,367 'substitut':555 'success':577 'task':541 'techniqu':59 'test':561 'tool':167,174 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'treat':550 'tri':257 'trigger':447 'troubleshoot':486 'true':256 'type':54,107,341,349,428 'type-saf':340 'type-safeti':53 'ui':12,87,149,153,156,162,166,173,207,213,415 'ui-graph':161 'ui-tooling-preview':172 'uistat':243,247,303,307,308,315 'uistate.asstateflow':249 'uistate.error':328,331 'uistate.isloading':326 'uistate.update':253,261,270 'uistate.user':333,336 'unit':318 'unnecessari':405 'unstabl':427 'updat':513 'use':40,62,65,75,83,93,101,201,344,399,413,435,527,535 'user':224,225,259,263,264 'usercont':306,314 'userid':366,385,394 'userprofil':335 'userrepositori':238,239 'userrepository.getuser':260 'userscreen':298 'useruist':218,245,316 'userviewmodel':233,300 'val':219,223,227,237,242,246,258,302,365,389 'valid':560 'version':129,354 'version.ref':145,194 'viewmodel':51,202,231,240,299,310,471 'viewmodel.uistate.collectasstatewithlifecycle':305 'viewmodelscope.launch':252 'without':466,507 'xml':79","prices":[{"id":"eec3fd91-33a0-4ffb-9eae-f543b89e57c6","listingId":"2805ac94-8b67-4e3f-8496-923768ad3dd2","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:30:56.518Z"}],"sources":[{"listingId":"2805ac94-8b67-4e3f-8496-923768ad3dd2","source":"github","sourceId":"sickn33/antigravity-awesome-skills/android-jetpack-compose-expert","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/android-jetpack-compose-expert","isPrimary":false,"firstSeenAt":"2026-04-18T21:30:56.518Z","lastSeenAt":"2026-04-25T00:50:25.877Z"}],"details":{"listingId":"2805ac94-8b67-4e3f-8496-923768ad3dd2","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"android-jetpack-compose-expert","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34964,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-24T06:41:17Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"8fd561a5c2cc59d9e9b061f5ad61feb3093d6719","skill_md_path":"skills/android-jetpack-compose-expert/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/android-jetpack-compose-expert"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"android-jetpack-compose-expert","description":"Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/android-jetpack-compose-expert"},"updatedAt":"2026-04-25T00:50:25.877Z"}}