SKILL Instructions
claude
cursor
chatgpt
#android
#kotlin
#compose
#ui
About
Teach an agent the fundamentals of Jetpack Compose: composables, state hoisting, recomposition, modifiers, and previews. Use when generating or refactoring Android UI code in Kotlin.
Metadata (SKILL.md frontmatter)
- name
- android-jetpack-compose-basics
- version
- 1.0.0
- compatibility
- claude, cursor, chatgpt
Instructions
Jetpack Compose Basics
When to use
Generating Android UI in Kotlin with Jetpack Compose.
Rules
- Prefer stateless
@Composablefunctions; hoist state to the caller. - Use
remember { mutableStateOf(...) }only for truly local UI state. - Apply
Modifierin order: size → padding → background → clickable. - Always add
@Previewfor each screen-level composable. - Use
LazyColumn/LazyRowfor lists, neverColumnwith.forEach.
Snippet
@Composable
fun Counter(count: Int, onInc: () -> Unit) {
Button(onClick = onInc) { Text("Count: $count") }
}