[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EX8NV6WD40AZSEQCBJMYBK":3,"skill-same:01M6EX8NV6WD40AZSEQCBJMYBK":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":47,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":49,"updatedAt":50,"install":51,"resources":64},"01M6EX8NV6WD40AZSEQCBJMYBK","android-jetpack-compose-expert",null,"Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fandroid-jetpack-compose-expert\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],"android","jetpack","android jetpack compose expert","jetpack compose","expert","compose","with","design","material","community","guidance","navigation","material design 3","management","state","state management","performance","safe","2026-11-10 10:12:30",false,"---\nname: android-jetpack-compose-expert\ndescription: Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3.\nrisk: safe\nsource: community\n---\n\n# 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\u002FMVVM)\n\nUse `ViewModel` with `StateFlow` to expose UI state. Avoid exposing `MutableStateFlow`.\n\n```kotlin\n\u002F\u002F UI State Definition\ndata class UserUiState(\n    val isLoading: Boolean = false,\n    val user: User? = null,\n    val error: String? = null\n)\n\n\u002F\u002F ViewModel\nclass UserViewModel @Inject constructor(\n    private val userRepository: UserRepository\n) : ViewModel() {\n\n    private val _uiState = MutableStateFlow(UserUiState())\n    val uiState: StateFlow\u003CUserUiState> = _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\u002F\u002F Define Destinations\n@Serializable\nobject Home\n\n@Serializable\ndata class Profile(val userId: String)\n\n\u002F\u002F Setup NavHost\n@Composable\nfun AppNavHost(navController: NavHostController) {\n    NavHost(navController, startDestination = Home) {\n        composable\u003CHome> {\n            HomeScreen(onNavigateToProfile = { id ->\n                navController.navigate(Profile(userId = id))\n            })\n        }\n        composable\u003CProfile> { 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","# 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\u002FMVVM)\n\nUse `ViewModel` with `StateFlow` to expose UI state. Avoid exposing `MutableStateFlow`.\n\n```kotlin\n\u002F\u002F UI State Definition\ndata class UserUiState(\n    val isLoading: Boolean = false,\n    val user: User? = null,\n    val error: String? = null\n)\n\n\u002F\u002F ViewModel\nclass UserViewModel @Inject constructor(\n    private val userRepository: UserRepository\n) : ViewModel() {\n\n    private val _uiState = MutableStateFlow(UserUiState())\n    val uiState: StateFlow\u003CUserUiState> = _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\u002F\u002F Define Destinations\n@Serializable\nobject Home\n\n@Serializable\ndata class Profile(val userId: String)\n\n\u002F\u002F Setup NavHost\n@Composable\nfun AppNavHost(navController: NavHostController) {\n    NavHost(navController, startDestination = Home) {\n        composable\u003CHome> {\n            HomeScreen(onNavigateToProfile = { id ->\n                navController.navigate(Profile(userId = id))\n            })\n        }\n        composable\u003CProfile> { 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",{"name":5,"risk":36,"source":28,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fandroid-jetpack-compose-expert",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill android-jetpack-compose-expert",{"tool":57,"command":58},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill android-jetpack-compose-expert",{"tool":60,"command":61},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill android-jetpack-compose-expert","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fandroid-jetpack-compose-expert\u002FSKILL.md",true,[65],{"path":66,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":69,"sourceHtmlUrl":70},"skill-report.json","REFERENCE","参考文档",8468,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fsickn33\u002Fandroid-jetpack-compose-expert\u002Fskill-report.json",[72,86,96,105,111,118],{"skillNo":73,"name":74,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":82,"publishedAt":37},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[77],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[83,84,85],"model","model hierarchy","model hierarchy skill",{"skillNo":87,"name":88,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":92,"publishedAt":37},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[91],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},[93,94,95],"MCP","zoom","zoom mcp",{"skillNo":97,"name":98,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":37},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[102,103,104,94],"sdk","zoom apps sdk","apps",{"skillNo":106,"name":107,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":110,"publishedAt":37},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[107],{"skillNo":112,"name":113,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":117,"publishedAt":37},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[116],{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},[113],{"skillNo":119,"name":120,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":123,"publishedAt":37},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[120]]