Android Kotlin Compose

Android Kotlin — Compose UI Module

Parent kit: ../../SKILL.md · Index: ../../AGENTS.md · Banned list: ../../references/00-banned-antipatterns.md

REVIEW MODE

Trigger phrases: "audit this file", "check this composable", "review this screen", "review mode", "a11y pass on this composable".

When triggered, silently run this 6-point checklist on the target file before responding. Cite failures by checklist number and banned-antipattern row from ../../references/00-banned-antipatterns.md.

Output format for REVIEW MODE:

Copy code
## Compose audit — <filename>

| # | Status | Finding |
|---|--------|---------|
| 1 | PASS/FAIL | ... |
...

### Banned antipatterns hit
- Row N: <pattern> → <fix>

### Suggested diff
<code block with minimal fix>

Load ../../references/17-accessibility.md when audit includes TalkBack, touch targets, or contrast.

AUTHORING MODE

Default behavior when writing new Compose UI (not auditing). Follow all rules below.

Read First

Edge-to-Edge (Default — AGP 9 / API 35+)

kotlinCopy code
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme {
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    contentWindowInsets = WindowInsets(0, 0, 0, 0)
                ) { innerPadding ->
                    NavHost(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                    )
                }
            }
        }
    }
}

• enableEdgeToEdge() on every ComponentActivity
• Respect WindowInsets — never hardcode status bar padding
• Use WindowInsets.safeDrawing for interactive content
• Test gesture nav bar + display cutout on physical device

Composable Contract

kotlinCopy code
@Composable
fun AccountCard(
    account: AccountUi,
    onClick: () -> Unit,
    modifier: Modifier = Modifier  // always first param after required data
) {
    Card(
        modifier = modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(12.dp))
            .clickable(onClick = onClick)
    ) {
        Text(
            text = stringResource(R.string.account_title, account.name),
            style = MaterialTheme.typography.titleMedium
        )
    }
}

Recomposition Rules

1. Extract sub-composables for separate restart scopes
2. Defer scroll/animation reads: Modifier.offset { IntOffset(...) }
3. @Immutable on UiState / list wrappers passed to children
4. remember(keys) { derivedStateOf { } } for expensive derived values
5. Never write state in composable body after read (backwards write)

LazyColumn Checklist

• key = { it.id } on every items()
• contentType when row layouts differ
• Stable lambdas: remember(id) { { onClick(id) } }
• No nested verticalScroll + LazyColumn
• Sort/filter in ViewModel or remember, not inline in items {}

Anti-Patterns (Compose)

Full list: ../../references/00-banned-antipatterns.md