Prepare Web UI DOM structure and focus behavior for TV remote navigation.
npx skills add https://github.com/tkgstrator/KotoTV --skill spatial-nav
Please help me install this Agent Skill. Skill: spatial-nav Source: https://github.com/tkgstrator/KotoTV/tree/main/.claude/skills/spatial-nav Command: npx skills add https://github.com/tkgstrator/KotoTV --skill spatial-nav
The skill outlines forward-compatibility guidelines to preserve DOM structure and focus behavior so a future TV remote (tvOS/FireTV) port can be integrated with minimal refactoring.
Implement these spatial navigation rules in the UI to enable a future remote-based navigation port.
High-intent search queries and answers about installing and using this skill.
To prepare web UI for spatial navigation, establish accessibility-focused rules for up, down, left, right, and OK inputs to reliably move focus and group related widgets. This ensures predictable remote control behavior without major architectural changes.
Spatial navigation for TV user interfaces is a focus management mechanism where directional inputs move focus between interactive elements. It requires preserving DOM structure and providing visible focus rings to support remote-controlled accessibility.
You can port a web UI prototype to TV platforms like tvOS or FireTV with minimal refactoring by following forward-compatibility guidelines. Preserving DOM structure and focus behavior early ensures a smooth remote navigation port later.
Ensure focus rings and tab order work by applying component-level checks for elements like ChannelCard, EPGGrid, HlsPlayer, and Dialog. These checks enforce predictable focus behavior and verify that remote navigation grouping functions reliably.
The best way to group related widgets for directional focus movement is to apply spatial navigation rules that preserve the DOM structure. This approach logically groups interactive elements so directional inputs move focus predictably across the UI.
You need to implement spatial navigation rules in a web application when planning a future port to TV platforms. Applying these accessibility and focus management guidelines early prevents complex architectural changes during the remote control integration phase.
coreyjaEnsure semantic HTML, ARIA attributes, keyboard navigation, and screen reader compatibility.
giolaqGuide React Native developers through TV app navigation and focus management.
Luqman-Ud-DinDetect keyboard accessibility failures by probing tab order, focus visibility, and trapped focus.
leogallegoImplement deterministic focus navigation in Jetpack Compose apps.
