skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hps-retro-tv

Generate retro-styled HTML presentation decks using a fixed token-based design system.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#storytelling#HTML#presentation#retro#deck#crt#Slides
One-click install
npx skills add https://github.com/nexu-io/open-design --skill hps-retro-tv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hps-retro-tv
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/hps-retro-tv
Command: npx skills add https://github.com/nexu-io/open-design --skill hps-retro-tv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill solves the challenge of creating visually consistent, high-impact presentation decks that require a specific aesthetic without the overhead of complex design software or external dependencies.

Core Features & Use Cases

  • Locked Design System: Provides a pre-configured, retro-CRT aesthetic with scanlines, warm parchment palettes, and Playfair typography.
  • Self-Contained Runtime: Includes a built-in keyboard-navigable slide engine that works as a single-file HTML artifact.
  • Use Case: Ideal for creating personal storytelling decks, family history archives, or niche media pitches that require a distinct, nostalgic visual identity.

Quick Start

Use the hps-retro-tv skill to generate a retro-styled HTML deck based on my provided family history outline.

Frequently Asked Questions about hps-retro-tv

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

FAQPage Schema
How do I create a new presentation with hps-retro-tv?▼

Copy the provided example.html file and replace the content within the section elements. Ensure you maintain the existing CSS root variables and script tags to preserve the retro-tv visual system and runtime functionality.

Can I change the colors or fonts in the retro-tv theme?▼

The retro-tv theme uses a locked token sheet to ensure visual consistency. You should not deviate from the defined CSS variables or import external fonts beyond the specified Google Fonts to maintain the intended broadcast aesthetic.

How do I add speaker notes to my slides?▼

Include a hidden div with the class 'notes' inside each section element. The deck runtime is designed to ignore these elements during the presentation, keeping your notes private while you present.

Does this skill support external chart libraries like Chart.js?▼

No, the retro-tv theme requires all charts to be built using pure CSS or inline SVG. This ensures the deck remains a self-contained, lightweight file without external dependencies.

What are the limitations of the retro-tv layout system?▼

The system is designed for 16:9 aspect ratio slides with a fixed 1280x720 baseline. It does not support vertical scrolling within individual slides, as each section is strictly constrained to the viewport height.

Related Skills

Explore More Design & Creative Skills→
TakfesTakfes

presentation-builder

Transform raw notes and research into a slide outline with PPTX export support.

Community
Advanced
piyushmal13piyushmal13

artifacts-builder

Automate frontend artifact creation and packaging into a single HTML bundle.

Community
Advanced
rm2thaddeusrm2thaddeus
4

image-enhancer

Enhance digital images by upscaling resolution, sharpening details, and reducing compression artifacts.

Community
Intermediate
Maccio-huangMaccio-huang

sprite-animation

Generate pixel-style animated explainer slides with CSS animations and inline SVGs.

Community
Intermediate