{
    "format": "skillpro/v1",
    "skill_id": "maxrave-dev-simpmusic-claude-skills-jetpack-compose-skill-md",
    "name": "android-jetpack-compose",
    "version": "1.0.0",
    "description": "Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns.",
    "category": [
        "生活与工具"
    ],
    "trigger_words": [],
    "tags": [],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=maxrave-dev-simpmusic-claude-skills-jetpack-compose-skill-md",
    "exported_at": "2026-09-16T17:20:23+08:00",
    "system_prompt": "name android-jetpack-compose description Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns. allowed-tools [\"Read\",\"Write\",\"Edit\",\"Bash\",\"Grep\",\"Glob\"] Android - Jetpack Compose Modern declarative UI toolkit for building native Android interfaces. Key Concepts State Management Compose provides several ways to manage state: remember : Survives recomposition rememberSaveable : Survives configuration changes mutableStateOf : Creates observable state derivedStateOf : Computed state that updates when dependencies change @Composable fun Counter () { var count by remember { mutableStateOf( 0 ) } Column { Text( \"Count: $count \" ) Button(onClick = { count++ }) { Text( \"Increment\" ) } } } // With saveable for configuration changes @Composable fun SearchField () { var query by rememberSaveable { mutableStateOf( \"\" ) } TextField( value = query, onValueChange = { query = it }, placeholder = { Text( \"Search...\" ) } ) } State Hoisting Lift state up to make composables stateless and reusable: // Stateless composable @Composable fun NameInput ( name: String , onNameChange: ( String ) -> Unit , modifier: Modifier = Modifier ) { TextField( value = name, onValueChange = onNameChange, label = { Text( \"Name\" ) }, modifier = modifier ) } // Stateful parent @Composable fun UserForm () { var name by remember { mutableStateOf( \"\" ) } NameInput( name = name, onNameChange = { name = it } ) } ViewModel Integration class UserViewModel : ViewModel () { private val _uiState = MutableStateFlow(UserUiState()) val uiState: StateFlow<UserUiState> = _uiState.asStateFlow() fun updateName (name: String ) { _uiState.update { it.copy(name = name) } } fun saveUser () { viewModelScope.launch { _uiState.update { it.copy(isLoading = true ) } try { userRepository.save(_uiState.value.toUser()) _uiState.update { it.copy(isLoading = false , isSaved = true ) } } catch (e: Exception) { _uiState.update { it.copy(isLoading = false , error = e.message) } } } } } @Composable fun UserScreen (viewModel: UserViewModel = viewModel() ) { val uiState by viewModel.uiState.collectAsStateWithLifecycle() UserContent( uiState = uiState, onNameChange = viewModel::updateName, onSave = viewModel::saveUser ) } Best Practices Composable Function Guidelines // Use Modifier as first optional parameter @Composable fun CustomCard ( title: String , modifier: Modifier = Modifier, onClick: () -> Unit = {} ) { Card( modifier = modifier.clickable(onClick = onClick) ) { Text( text = title, modifier = Modifier.padding( 16. dp) ) } } // Use slot APIs for flexible content @Composable fun CustomScaffold ( topBar: @ Composable () -> Unit = {}, bottomBar: @ Composable () -> Unit = {}, content: @ Composable ( PaddingValues ) -> Unit ) { Scaffold( topBar = topBar, bottomBar = bottomBar, content = content ) } Efficient Recomposition // Use keys for list items @Composable fun UserList (users: List < User >) { LazyColumn { items( items = users, key = { it.id } // Stable key for efficient updates ) { user -> UserItem(user) } } } // Use derivedStateOf for expensive computations @Composable fun FilteredList (items: List < Item >, query: String ) { val filteredItems by remember(items, query) { derivedStateOf { items.filter { it.name.contains(query, ignoreCase = true ) } } } LazyColumn { items(filteredItems) { item -> ItemRow(item) } } } Side Effects // LaunchedEffect for coroutine-based side effects @Composable fun UserProfile (userId: String , viewModel: UserViewModel ) { LaunchedEffect(userId) { viewModel.loadUser(userId) } // UI content } // DisposableEffect for cleanup @Composable fun LifecycleAwareComponent (lifecycle: Lifecycle ) { DisposableEffect(lifecycle) { val observer = LifecycleEventObserver { _, event -> // Handle lifecycle events } lifecycle.addObserver(observer) onDispose { lifecycle.removeObserver(observer) } } } // SideEffect for non-suspend side effects @Composable fun AnalyticsScreen (screenName: String ) { SideEffect { analytics.logScreenView(screenName) } } Common Patterns Navigation with Navigation Compose @Composable fun AppNavigation () { val navController = rememberNavController() NavHost(navController = navController, startDestination = \"home\" ) { composable( \"home\" ) { HomeScreen( onNavigateToDetail = { id -> navController.navigate( \"detail/ $id \" ) } ) } composable( route = \"detail/{itemId}\" , arguments = listOf(navArgument( \"itemId\" ) { type = NavType.StringType }) ) { backStackEntry -> val itemId = backStackEntry.arguments?.getString( \"itemId\" ) DetailScreen(itemId = itemId) } } } Material 3 Theming @Composable fun AppTheme ( darkTheme: Boolean = isSystemInDarkTheme() , content: @Composable () -> Unit ) { val colorScheme = when { darkTheme -> darkColorScheme( primary = Purple80, secondary = PurpleGrey80, tertiary = Pink80 ) else -> lightColorScheme( primary = Purple40, secondary = PurpleGrey40, tertiary = Pink40 ) } MaterialTheme( colorScheme = colorScheme, typography = Typography, content = content ) } // Using theme values @Composable fun ThemedCard () { Card( colors = CardDefaults.cardColors( containerColor = MaterialTheme.colorScheme.surfaceVariant ) ) { Text( text = \"Themed content\" , style = MaterialTheme.typography.bodyLarge, color = MaterialTheme.colorScheme.onSurfaceVariant ) } } Lists and Grids @Composable fun ProductGrid (products: List < Product >) { LazyVerticalGrid( columns = GridCells.Adaptive(minSize = 160. dp), contentPadding = PaddingValues( 16. dp), horizontalArrangement = Arrangement.spacedBy( 16. dp), verticalArrangement = Arrangement.spacedBy( 16. dp) ) { items(products, key = { it.id }) { product -> ProductCard(product) } } } // Sticky headers @Composable fun ContactList (contacts: Map < Char , List<Contact>>) { LazyColumn { contacts.forEach { (initial, contactsForInitial) -> stickyHeader { Text( text = initial.toString(), modifier = Modifier .fillMaxWidth() .background(MaterialTheme.colorScheme.surface) .padding( 16. dp), style = MaterialTheme.typography.titleMedium ) } items(contactsForInitial) { contact -> ContactItem(contact) } } } } Anti-Patterns Avoid Side Effects in Composition Bad: @Composable fun BadExample (viewModel: ViewModel ) { viewModel.loadData() // Called on every recomposition! Text( \"Data loaded\" ) } Good: @Composable fun GoodExample (viewModel: ViewModel ) { LaunchedEffect( Unit ) { viewModel.loadData() } Text( \"Data loaded\" ) } Don't Read State in Remember Block Bad: @Composable fun BadCounter (initial: Int ) { // Won't update when initial changes var count by remember { mutableStateOf(initial) } } Good: @Composable fun GoodCounter (initial: Int ) { var count by remember(initial) { mutableStateOf(initial) } } Avoid Heavy Computation During Composition Bad: @Composable fun BadList (items: List < Item >) { // Runs on every recomposition val sorted = items.sortedBy { it.name } LazyColumn { /* ... */ } } Good: @Composable fun GoodList (items: List < Item >) { val sorted by remember(items) { derivedStateOf { items.sortedBy { it.name } } } LazyColumn { /* ... */ } } Related Skills android-architecture : MVVM and clean architecture patterns android-kotlin-coroutines : Async operations in Compose",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "examples": [
        {
            "input": "请用android-jetpack-compose帮我处理问题",
            "output": "好的，我是android-jetpack-compose。Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns. 我会根据你的需求提供专业帮助。"
        },
        {
            "input": "介绍一下你的能力",
            "output": "我是android-jetpack-compose，专注于生活与工具领域。Use when building Android UIs with Jetpack Compose, managing state with remember/mutableStateOf, or implementing declarative UI patterns."
        }
    ],
    "install_guide": {
        "coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
        "dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
        "claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
        "custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
    },
    "scripts": {
        "python": "# android-jetpack-compose - Python extension\n# Add custom Python logic here\ndef process(input_data):\n    return input_data\n",
        "javascript": "// android-jetpack-compose - JavaScript extension\n// Add custom JS logic here\nfunction process(inputData) {\n    return inputData;\n}\n"
    },
    "tools": {
        "mcp_servers": [],
        "api_endpoints": []
    },
    "dependencies": {
        "python": [],
        "node": []
    },
    "hooks": {
        "on_load": "echo \"Skill loaded: android-jetpack-compose\"",
        "on_call": "",
        "on_error": "echo \"Skill error: please check logs\""
    }
}