# Kotlin Compose

> Jetpack Compose - composables, state, effects, theming

- Skill: `majiayu000/kotlin-compose` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/kotlin-compose`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/kotlin-compose/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/kotlin-compose

---


# Kotlin Compose Skill

Build modern UIs with Jetpack Compose declarative patterns.

## Topics Covered

### State Management
```kotlin
@Composable
fun Counter() {
    var count by remember { mutableIntStateOf(0) }
    Button(onClick = { count++ }) { Text("Count: $count") }
}

// Derived state
val isValid by remember { derivedStateOf { email.isNotBlank() && password.length >= 8 } }
```

### Side Effects
```kotlin
@Composable
fun UserScreen(userId: String) {
    LaunchedEffect(userId) {
        viewModel.loadUser(userId)
    }

    DisposableEffect(Unit) {
        val listener = viewModel.addListener()
        onDispose { listener.remove() }
    }
}
```

### Modifiers
```kotlin
Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
        .background(MaterialTheme.colorScheme.surface)
        .clickable { onClick() }
)
```

### Material 3 Theming
```kotlin
@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()
    MaterialTheme(colorScheme = colorScheme, typography = Typography, content = content)
}
```

## Troubleshooting

| Issue | Resolution |
|-------|------------|
| Infinite recomposition | Use remember or derivedStateOf |
| State lost on rotation | Use rememberSaveable or ViewModel |

## Usage
```
Skill("kotlin-compose")
```