spatial-nav

Name: spatial-nav
Availability: InStock
Author: tkgstrator

Prepare Web UI DOM structure and focus behavior for TV remote navigation.

1|Updated Apr 18, 2026

Search Tags:#accessibility #remote-control #focus-management #spatial-navigation #tv-ui

Ready to run

npx skills add https://github.com/tkgstrator/KotoTV --skill spatial-nav

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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.

Core Features & Use Cases

Establishes accessibility-focused rules for focus rings, tab order, and groupings to support remote navigation.
Provides component-level checks for ChannelCard, EPGGrid, HlsPlayer, and Dialog to ensure predictable focus behavior.
Use Case: A Web UI prototype can be ported later to TV platforms without major architectural changes by following these rules.

Quick Start

Implement these spatial navigation rules in the UI to enable a future remote-based navigation port.

Frequently Asked Questions about spatial-nav

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

FAQPage Schema

How do I prepare web UI for spatial navigation with a TV remote?▼

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.

What is spatial navigation for TV user interfaces?▼

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.

Can I port a web UI prototype to tvOS or FireTV without major refactoring?▼

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.

How do I ensure focus rings and tab order work correctly for remote control navigation?▼

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.

What's the best way to group related widgets for directional focus movement?▼

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.

When do I need to implement spatial navigation rules in a web application?▼

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.