Compose Focus Navigation
Use when writing or reviewing Jetpack Compose UI for TV, keyboard, desktop...
Install
npx skills add chrisbanes/skills --skill compose-focus-navigation -g -a claude-code -y- Repository
- chrisbanes/skills1.1k
- Category
- Design
- Updated
- 3d ago
- License
- Apache-2.0
- Context cost
- Lightabout 934 tokens
- Runs scripts
- No, instructions only
What it does
Use when writing or reviewing Jetpack Compose UI for TV, keyboard, desktop, accessibility focus, D-pad navigation, FocusRequester, focusProperties, key events, or initial focus behavior.
Compose: focus navigation
Core principle
Focus is stateful UI behavior: make targets and exceptional edges explicit, then drive and verify it through the user's keyboard, D-pad, or remote input.
Procedure
- Start with components that already participate in focus. Add a hook only for a requested behavior:
| Need | Add |
|---|---|
| Normal button/text field/clickable focus | Nothing extra; use the focusable component |
| Programmatic initial/restored focus | FocusRequester + Modifier.focusRequester(...) |
| Visual or state reaction to focus changes | Modifier.onFocusChanged { ... } |
| Custom interactive surface that is not already focusable | Modifier.focusable() plus role/semantics as appropriate |
