# Tv Design Patterns

> TV and living room interface design including 10-foot UI, focus-based navigation, and media browsing.

- Skill: `dragoon0x/tv-design-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/tv-design-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/tv-design-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/tv-design-patterns

---


# Tv Design Patterns

## 10-Foot UI Principles

1. **Large text.** Minimum 24px at 1080p. Readable from 10 feet.
2. **Focus-based navigation.** D-pad/remote: up, down, left, right, select.
3. **High contrast.** Dark backgrounds, bright text. Room lighting varies.
4. **Minimal text input.** Avoid keyboards. Use voice search, phone companion, QR code login.

## Navigation
- Horizontal tabs at top for main sections.
- Content rows (rails) for browsing.
- Focus ring: clear highlight on currently selected item.
- Spatial memory: remember position in each section.

## Content Presentation
- Large thumbnails/posters.
- Title + metadata visible without selecting.
- Preview on hover/focus (video auto-play after 2s).
- Detail page: hero image, synopsis, actions, related.

## Remote Control Design
- Maximum 6 buttons for primary interaction.
- Voice search as primary input method.
- Back button always exits current context.
- Long-press for secondary actions.