Kotlin/Jetpack Compose Development

Kotlin/Jetpack Compose Development Skill

Overview

This skill provides expert capabilities for native Android development using Kotlin and Jetpack Compose. It enables generation of Compose UI components, implementation of modern Android architecture patterns, and comprehensive Gradle build operations.

Allowed Tools

• bash - Execute Gradle commands, adb, and Android SDK tools
• read - Analyze Kotlin source files and Gradle configurations
• write - Generate and modify Kotlin code and Compose composables
• edit - Update existing Kotlin code and configurations
• glob - Search for Kotlin files and Android resources
• grep - Search for patterns in Android codebase

Capabilities

Jetpack Compose

1. Composable Functions
2. Create Material Design 3 composables
3. Implement custom layouts with Layout composable
4. Build reusable UI components
5. Generate preview annotations
6. Create multi-preview configurations

1. State Management
2. Implement remember and rememberSaveable
3. Use state hoisting patterns
4. Configure derivedStateOf for computed state
5. Implement snapshotFlow for side effects
6. Handle configuration changes

1. Navigation
2. Configure Compose Navigation with NavHost
3. Implement type-safe navigation with arguments
4. Set up nested navigation graphs
5. Handle deep links with NavDeepLink
6. Implement bottom navigation with BottomNavigation

ViewModel Integration

1. ViewModel Patterns
2. Create ViewModels with Hilt injection
3. Implement StateFlow and SharedFlow
4. Configure SavedStateHandle
5. Handle process death recovery
6. Use viewModelScope for coroutines

1. UI State Management
2. Design sealed class UI states
3. Implement loading, error, and success states
4. Configure pull-to-refresh
5. Handle pagination with Paging 3
6. Implement search with debouncing

Kotlin Coroutines

1. Coroutine Patterns
2. Configure CoroutineScope and dispatchers
3. Implement structured concurrency
4. Handle cancellation properly
5. Use SupervisorJob for error isolation
6. Configure ExceptionHandler

1. Flow Patterns
2. Create cold and hot Flows
3. Implement StateFlow and SharedFlow
4. Configure Flow operators
5. Handle backpressure with buffer
6. Transform Flows with map, filter, combine

Dependency Injection

1. Hilt Integration
2. Configure Hilt modules
3. Implement @Inject annotations
4. Set up ViewModelComponent
5. Configure Singleton and Scoped bindings
6. Use @EntryPoint for framework classes

Gradle Build System

1. Build Configuration
2. Configure build.gradle.kts with Kotlin DSL
3. Set up build variants and flavors
4. Configure ProGuard/R8 rules
5. Implement version catalogs
6. Set up composite builds

1. KSP/KAPT
2. Configure Kotlin Symbol Processing
3. Set up Room with KSP
4. Configure Hilt with KAPT
5. Generate code with custom processors

Testing

1. Testing Frameworks
2. Write JUnit 5 unit tests
3. Implement Compose UI tests
4. Configure test rules and fixtures
5. Mock dependencies with MockK
6. Set up Robolectric for JVM tests

Target Processes

This skill integrates with the following processes:

• jetpack-compose-ui.js - Compose UI development
• android-room-database.js - Room persistence
• firebase-cloud-messaging.js - FCM integration
• android-playstore-publishing.js - Play Store submission

Dependencies

Required

• Android Studio Hedgehog or later
• Android SDK 34+
• Kotlin 1.9+
• Gradle 8.2+

Optional

• Android Emulator
• Firebase tools
• adb (Android Debug Bridge)
• Layout Inspector

Configuration

Project Structure

app/
├── src/
│   ├── main/
│   │   ├── kotlin/com/example/myapp/
│   │   │   ├── MyApplication.kt
│   │   │   ├── MainActivity.kt
│   │   │   ├── di/
│   │   │   │   └── AppModule.kt
│   │   │   ├── data/
│   │   │   │   ├── repository/
│   │   │   │   ├── local/
│   │   │   │   └── remote/
│   │   │   ├── domain/
│   │   │   │   ├── model/
│   │   │   │   ├── repository/
│   │   │   │   └── usecase/
│   │   │   └── ui/
│   │   │       ├── theme/
│   │   │       ├── navigation/
│   │   │       └── feature/
│   │   ├── res/
│   │   └── AndroidManifest.xml
│   ├── test/
│   └── androidTest/
├── build.gradle.kts
└── proguard-rules.pro

Version Catalog

# gradle/libs.versions.toml
[versions]
kotlin = "1.9.21"
compose-bom = "2024.01.00"
hilt = "2.50"
room = "2.6.1"
lifecycle = "2.7.0"

[libraries]
compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "compose-bom" }
compose-ui = { group = "androidx.compose.ui", name = "ui" }
compose-material3 = { group = "androidx.compose.material3", name = "material3" }
compose-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
hilt-android = { group = "com.google.dagger", name = "hilt-android", version.ref = "hilt" }
hilt-compiler = { group = "com.google.dagger", name = "hilt-compiler", version.ref = "hilt" }
room-runtime = { group = "androidx.room", name = "room-runtime", version.ref = "room" }
room-ktx = { group = "androidx.room", name = "room-ktx", version.ref = "room" }
room-compiler = { group = "androidx.room", name = "room-compiler", version.ref = "room" }

[plugins]
android-application = { id = "com.android.application", version = "8.2.0" }
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
hilt = { id = "com.google.dagger.hilt.android", version.ref = "hilt" }
ksp = { id = "com.google.devtools.ksp", version = "1.9.21-1.0.16" }

Usage Examples

Create Composable Screen

// ui/feature/home/HomeScreen.kt
package com.example.myapp.ui.feature.home

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomeScreen(
    viewModel: HomeViewModel = hiltViewModel(),
    onItemClick: (String) -> Unit
) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Home") }
            )
        }
    ) { paddingValues ->
        when (val state = uiState) {
            is HomeUiState.Loading -> {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(paddingValues),
                    contentAlignment = Alignment.Center
                ) {
                    CircularProgressIndicator()
                }
            }
            is HomeUiState.Success -> {
                LazyColumn(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(paddingValues),
                    contentPadding = PaddingValues(16.dp),
                    verticalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    items(state.items, key = { it.id }) { item ->
                        ItemCard(
                            item = item,
                            onClick = { onItemClick(item.id) }
                        )
                    }
                }
            }
            is HomeUiState.Error -> {
                ErrorContent(
                    message = state.message,
                    onRetry = viewModel::retry,
                    modifier = Modifier.padding(paddingValues)
                )
            }
        }
    }
}

@Composable
private fun ItemCard(
    item: Item,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Card(
        onClick = onClick,
        modifier = modifier.fillMaxWidth()
    ) {
        Column(
            modifier =