compose-focus-navigation
Compose: focus navigation
Core principle
Focus is stateful UI behavior. Make focus targets explicit, request focus after composition succeeds, and test navigation with the same input model users use: keyboard, D-pad, or remote keys.
When to use this skill
Use this when UI:
- Runs on TV, desktop, ChromeOS, keyboard-first Android, or remote-control devices.
- Uses
FocusRequester,focusRequester,focusProperties,onFocusChanged, or key handlers. - Needs initial focus, restored focus, directional navigation, or back/escape behavior.
- Has a carousel, grid, lazy list, menu, dialog, or modal with focus traps.
- Has tests asserting which item is focused.
Build focus targets deliberately
Start with components that already participate in focus, then add only the focus hooks the behavior needs:
More from chrisbanes/skills
kotlin-coroutines-structured-concurrency
Use when writing or reviewing Kotlin code that stores CoroutineScope, launches from init/non-suspending APIs, calls runBlocking, or catches broad exceptions around suspend calls.
161compose-side-effects
Use when writing or reviewing Jetpack Compose code with LaunchedEffect, DisposableEffect, SideEffect, rememberCoroutineScope, rememberUpdatedState, snapshotFlow, snackbar, navigation, focus requests, analytics, or event Flow collection.
160compose-modifier-and-layout-style
Use when writing or reviewing Jetpack Compose layout APIs, modifier parameters, modifier chain construction, hardcoded root layout decisions, or layout wrappers around a single conditional.
160compose-ui-testing-patterns
Use when writing or reviewing Jetpack Compose UI tests, screenshot tests, previews, semantics assertions, fake image loading, keyboard input, focus assertions, interaction state (hover/pressed/focused), or tests for plain state-driven UI composables.
160compose-stability-diagnostics
Use when writing or reviewing Jetpack Compose parameter stability, compiler reports, skippability, unstable UI state classes, collection parameters, or Kotlin 2.0+ strong skipping behavior.
159compose-state-authoring
Use when writing or reviewing Jetpack Compose code with bare local var in a @Composable, remember { mutableStateOf(...) }, mutableStateListOf/mutableStateMapOf, or @ReadOnlyComposable.
158