# Compose Focus Navigation

Use when writing or reviewing Jetpack Compose UI for TV, keyboard, desktop...

- Repository: https://github.com/chrisbanes/skills (1135 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add chrisbanes/skills --skill compose-focus-navigation -g -a claude-code -y`
Codex: `npx skills add chrisbanes/skills --skill compose-focus-navigation -g -a codex -y`
Cursor: `npx skills add chrisbanes/skills --skill compose-focus-navigation -g -a cursor -y`
Gemini CLI: `npx skills add chrisbanes/skills --skill compose-focus-navigation -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add chrisbanes/skills`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

1. 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 |

The rest: https://github.com/chrisbanes/skills/blob/HEAD/skills/compose-focus-navigation/SKILL.md