compose-focus-navigation

Implements and reviews Jetpack Compose focus navigation for TV, keyboard, and D-pad interfaces.

1|Updated Jul 6, 2026
One-click install
npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill compose-focus-navigation-citytexi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: compose-focus-navigation
Source: https://github.com/citytexi/team-yg-pesonal-agent/tree/main/.claude/skills/compose-focus-navigation
Command: npx skills add https://github.com/citytexi/team-yg-pesonal-agent --skill compose-focus-navigation-citytexi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Focus behavior in Jetpack Compose breaks easily on TV, desktop, and keyboard-first devices: initial focus fires before content loads, directional navigation jumps to wrong elements, and focus is lost after list refreshes. This Skill provides concrete patterns and review criteria for building correct focus behavior. ## Core Features & Use Cases - Focus target construction: Guidance on when to use FocusRequester, focusRequester, onFocusChanged, and focusable() versus relying on natively focusable components. - Directional navigation and key events: Patterns for focusProperties overrides, onPreviewKeyEvent handlers, back/escape behavior, and D-pad input throttling. - Focus restoration and testing: Strategies for preserving focus by stable item id across recompositions and testing focus with performKeyInput and assertIsFocused. - Use Case: You are building an Android TV app with a carousel of content rows. Use this Skill to set initial focus after items load, wire up/down navigation between rows, and write tests that send D-pad keys and assert the focused node. ## Quick Start Ask the AI to review your Compose TV screen's focus handling or to add initial focus and D-pad navigation to a lazy list using this skill.

Frequently Asked Questions about compose-focus-navigation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set initial focus in Jetpack Compose?▼

Create a FocusRequester with remember, attach it via Modifier.focusRequester, then call requestFocus() inside a LaunchedEffect. If the target appears after loading, key the effect to the loaded condition rather than Unit so the request fires after composition succeeds.

How do I handle D-pad navigation in Compose for Android TV?▼

Use focusable components like Button and clickable surfaces so spatial search works by default. Override navigation only where it breaks using Modifier.focusProperties with up, down, left, and right targets, and throttle rapid D-pad input at the scrolling or paging boundary.

How do I test focus behavior in Compose UI tests?▼

Send real key input with composeTestRule.onNodeWithTag(...).performKeyInput { pressKey(Key.DirectionDown) } and assert the result with assertIsFocused(). Prefer asserting focused semantics over screenshot tests, which only suit focus appearance.

Why does requestFocus crash or fail in Compose?▼

requestFocus fails when called before the target is composed, such as directly in the composable body or keyed to Unit while content loads later. Move the call into a LaunchedEffect keyed to the condition that guarantees the target exists.

When should I use focusProperties versus default focus order?▼

Use focusProperties only when default spatial search picks the wrong target or you need a specific jump or trap. Hard-coding many links creates stale focus graphs when layouts change, so prefer natural focus order for most layouts.

How do I restore focus after a lazy list refreshes in Compose?▼

Track the focused item by stable id rather than index, use stable key values in the lazy list, and re-request focus for the same id after refresh. If the item no longer exists, fall back deterministically to a neighbor, first item, or parent container.