A specialized tool for generating pure frontend Smart TV Launcher prototypes optimized for remote control interaction and big-screen experiences.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install tv-launcher-prototype
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install tv-launcher-prototype using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is TV Launcher Prototype Generator?
The TV Launcher Prototype skill is an expert-level generator designed to build Web-based Smart TV interfaces. It bridges the gap between traditional Web UI and the specialized 10-foot UI experience required for television. Unlike standard web pages, these prototypes are built from the ground up to support spatial navigation via directional keys, high-contrast focus states, and scalable layouts that remain legible from a distance of 2-3 meters.
This skill automates the creation of complex TV design patterns including deep dark themes, oversized card layouts, and focus-driven vertical scrolling. It eliminates the need for external frameworks or build tools, producing clean HTML, CSS, and JavaScript that runs directly in any browser while simulating the authentic look and feel of high-end OTT and Set-Top Box interfaces.
TV Launcher Prototype Generator Use Cases
- Creating rapid prototypes for Smart TV home screens and app launchers.
- Designing 10-foot UI layouts for OTT streaming platforms and media centers.
- Testing remote control navigation logic (D-pad) in a browser environment.
- Demonstrating focus-state animations and spatial navigation workflows to stakeholders.
- Developing dark-themed interfaces optimized for large-screen visibility.
How TV Launcher Prototype Generator Works
- The agent analyzes the user's request for a TV interface, identifying key components like app grids, banners, or sidebars.
- It generates a single or multi-page HTML structure using pure CSS and vanilla JavaScript.
- A specialized spatial navigation engine is injected to manage focus states across all interactive elements.
- Visual styles are applied using relative units (vw/vh) to ensure perfectly scaled layouts regardless of screen resolution.
- Event listeners for keyboard directional keys (arrows, Enter, Backspace) are mapped to simulate physical remote control inputs.
TV Launcher Prototype Generator Setup
To use this skill within the Openclaw Skills ecosystem, simply trigger it via a natural language prompt. No complex installation is required as it outputs standard web files.
# Example prompt to trigger the skill
"Create a TV Launcher prototype with a dark theme, 3 rows of movie cards, and a side navigation menu."
TV Launcher Prototype Generator Data Schema & Taxonomy
The skill generates a structured frontend package. The taxonomy of the output is organized as follows:
| Component | Description |
|---|---|
| Index.html | The entry point containing the UI structure and layout containers. |
| Focus Engine | JavaScript logic handling keydown events and spatial element selection. |
| Viewport Scaling | CSS logic utilizing vw or scale for responsive 100% width coverage. |
| Focus Styles | CSS rules for scale (1.05x-1.1x), box-shadow glows, and white outlines. |
| Assets | Placeholder images, emojis, or user-provided assets for cards and backgrounds. |
TV Launcher Prototype Generator Advanced Features
- Spatial Navigation System: Automatic calculation of the nearest element in the direction of the keypress.
- Focus-Driven Scrolling: Smooth viewport adjustment when the active focus moves outside the visible area.
- Dynamic Theming: Backdrop-filter blur effects and background color transitions linked to the focused item's metadata.
- Remote Simulation: Full support for Backspace/Esc as 'Back' commands and Enter/Space as 'OK' commands.
- Scrollbar Hiding: Native implementation of clean, immersive interfaces without standard browser scrollbars.
SKILL.md
Loading
Related Openclaw Skills
Nano Banana Prompt Generator Skill
A sophisticated prompt engineering engine that transforms user descriptions into structured JSON parameters for Google's Gemini 3.1 Flash Image model.
PPT Visual Designer - Block Style
A strategic visual design skill that transforms complex business logic and organizational structures into logically aesthetic, modular Block style presentation layouts.
Market Overview Skill
A comprehensive crypto market dashboard skill that aggregates global market data, DeFi metrics, and macro indicators into a single briefing.
Gate News Listing Tracker
An automated crypto exchange announcement tracker that provides detailed listing reports with fundamental and market data.
lyuuo-book: Personal CLI Bookkeeping Agent
A local CLI-based personal bookkeeping tool that leverages SQLite to track income, expenses, transfers, and budgets via AI agent commands.
Seedance Creator
A professional AI creative assistant designed for ByteDance's Seedance 2.0 platform to generate high-quality images and cinematic videos via CLI automation.
Featured*
