[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6XE5DFB7FJ33TK45750V8MA":3,"skill-same:01M6XE5DFB7FJ33TK45750V8MA":66},{"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":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":14,"repositoryHtmlUrl":49,"repositoryHomepageUrl":6,"ownerHtmlUrl":50,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":51,"install":52,"resources":65},"01M6XE5DFB7FJ33TK45750V8MA","android-jetpack-compose-expert",null,"Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fandroid-jetpack-compose-expert\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"android","jetpack compose","jetpack","compose","android jetpack compose expert","expert","navigation","2026","for","material design","with","material","community","guidance","design","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\ndate_added: \"2026-02-27\"\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":39,"source":31,"date_added":45,"description":7},"2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fcopilot\u002Fandroid-jetpack-compose-expert","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill android-jetpack-compose-expert",{"tool":58,"command":59},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill android-jetpack-compose-expert",{"tool":61,"command":62},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill android-jetpack-compose-expert","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcopilot\u002Fandroid-jetpack-compose-expert\u002FSKILL.md",true,[],[67,89,115,125,138,157],{"skillNo":68,"name":69,"nameZh":6,"description":70,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":71,"categories":72,"keywords":78,"publishedAt":40},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[73],{"categoryNo":74,"categoryName":75,"taxonomyType":76,"taxonomyTypeDesc":77},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[79,80,81,82,83,33,84,85,86,87,88,29],"wechat search","wechat","search","capabilities","openclaw","web search","compliance","web","official","fetch",{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":40},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[96,97,98,99,100,101,81,102,103,104,105,106,107,108,109,110,111,112,113,114],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":40},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[122,123,96,107,108,109,110,100,81,112,124,113,114,106,104,103,102,111,101,99],"trend radar","radar","pulse",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":131,"publishedAt":40},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[132,133,134,135,136,137],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":149,"publishedAt":40},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[144],{"categoryNo":145,"categoryName":146,"taxonomyType":147,"taxonomyTypeDesc":148},"01JBSEEDCAT000000000000021","资料检索与研究","SCENARIO","使用场景",[140,86,150,151,152,29,107,153,154,155,98,156,111],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":158,"name":159,"nameZh":6,"description":160,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":161,"categories":162,"keywords":163,"publishedAt":40},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[159,164,165,166,111,167,154,168,169,170,171,172],"status","play","go","latest","github","discover","control","cmd","volume"]