Kotlin/Jetpack Compose Development
Included with Lifetime
$97 forever
Expert skill for native Android development with Kotlin and Jetpack Compose
Native Android Development
What this skill does
# 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**
- Create Material Design 3 composables
- Implement custom layouts with Layout composable
- Build reusable UI components
- Generate preview annotations
- Create multi-preview configurations
2. **State Management**
- Implement remember and rememberSaveable
- Use state hoisting patterns
- Configure derivedStateOf for computed state
- Implement snapshotFlow for side effects
- Handle configuration changes
3. **Navigation**
- Configure Compose Navigation with NavHost
- Implement type-safe navigation with arguments
- Set up nested navigation graphs
- Handle deep links with NavDeepLink
- Implement bottom navigation with BottomNavigation
### ViewModel Integration
4. **ViewModel Patterns**
- Create ViewModels with Hilt injection
- Implement StateFlow and SharedFlow
- Configure SavedStateHandle
- Handle process death recovery
- Use viewModelScope for coroutines
5. **UI State Management**
- Design sealed class UI states
- Implement loading, error, and success states
- Configure pull-to-refresh
- Handle pagination with Paging 3
- Implement search with debouncing
### Kotlin Coroutines
6. **Coroutine Patterns**
- Configure CoroutineScope and dispatchers
- Implement structured concurrency
- Handle cancellation properly
- Use SupervisorJob for error isolation
- Configure ExceptionHandler
7. **Flow Patterns**
- Create cold and hot Flows
- Implement StateFlow and SharedFlow
- Configure Flow operators
- Handle backpressure with buffer
- Transform Flows with map, filter, combine
### Dependency Injection
8. **Hilt Integration**
- Configure Hilt modules
- Implement @Inject annotations
- Set up ViewModelComponent
- Configure Singleton and Scoped bindings
- Use @EntryPoint for framework classes
### Gradle Build System
9. **Build Configuration**
- Configure build.gradle.kts with Kotlin DSL
- Set up build variants and flavors
- Configure ProGuard/R8 rules
- Implement version catalogs
- Set up composite builds
10. **KSP/KAPT**
- Configure Kotlin Symbol Processing
- Set up Room with KSP
- Configure Hilt with KAPT
- Generate code with custom processors
### Testing
11. **Testing Frameworks**
- Write JUnit 5 unit tests
- Implement Compose UI tests
- Configure test rules and fixtures
- Mock dependencies with MockK
- 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
```toml
# 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
```kotlin
// 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