html-ppt-dir-key-nav-minimal

Generates an 8-page minimal HTML keynote deck with per-slide monochrome backgrounds and arrow-key navigation.

Updated May 20, 2026
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-dir-key-nav-minimal-keimoshi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-ppt-dir-key-nav-minimal
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/html-ppt-dir-key-nav-minimal
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill html-ppt-dir-key-nav-minimal-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating a visually consistent, minimal keynote deck in HTML requires assembling typography, slide transitions, keyboard navigation, and speaker notes from scratch. This Skill provides a ready-made 8-page template where each slide has its own monochrome background, oversized display title, and arrow-prefixed mono list, so you only need to replace the demo content. ## Core Features & Use Cases - Fixed 8-slide visual system: Each page uses one of eight monochrome backgrounds (indigo, cream, crimson, emerald, slate, violet, white, charcoal) with 160px display headings, a 4px accent divider line, and generous whitespace. - Keyboard-driven presentation runtime: Arrow keys and space navigate slides, with kbd hints at bottom-left and page numbers at bottom-right; speaker notes live in hidden <aside class="notes"> elements. - Two integration recipes: Copy the shared CSS/JS runtime into a project-local assets folder, or inline all styles and scripts into a single self-contained index.html. - Use Case: A speaker preparing a launch talk with one idea per slide asks the AI to turn 8 core points into an 8-page keynote, and receives a navigable HTML deck matching this exact visual identity. ## Quick Start Ask the AI to use the html-ppt-dir-key-nav-minimal template to build an 8-page minimal keynote, providing your talk topic and the 8 core ideas you want on the slides.

Frequently Asked Questions about html-ppt-dir-key-nav-minimal

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

FAQPage Schema
How do I create a minimal HTML keynote presentation with keyboard navigation?

Copy the dir-key-nav-minimal template's index.html and style.css into your project, keep the .tpl-dir-key-nav-minimal body class, and replace the demo slide content. The shared runtime.js provides arrow-key and space navigation between slides.

How do I add speaker notes to an HTML slide deck?

Place speaker notes inside <aside class="notes"> or <div class="notes"> elements within each slide. The base CSS hides these from the audience view, and the runtime can display them in a presenter overlay or popup window.

Why do the CSS and JS files 404 after copying the template into a project?

The upstream index.html references shared assets via ../../../assets/ paths that only resolve inside the skill directory tree. Either copy fonts.css, base.css, animations.css, and runtime.js into a project-local assets folder and rewrite the paths, or inline their contents directly into index.html.

Can I change the color theme of the HTML deck?

Yes. The deck supports 36 themes from the html-ppt assets/themes directory, swappable via a <link id="theme-link"> tag, and the T key cycles through them. The eight per-slide monochrome backgrounds are defined by the template's own scoped CSS classes.

What are the limitations of this minimal keynote template?

The template is fixed to an 8-slide structure with one idea per slide and a strict set of structural classes that the scoped CSS recognizes. It suits talks with few visual assets; content-heavy decks with charts, images, or dense data need a different template.