Skill detail

html-presentations

Creates self-contained HTML presentations with navigation and print support.

MatchDirectReviewed for html presentation

Sourceez404-36/vroomlyExternal source

Reported installs1Popularity signal only

Inspect before use

Automated review checks relevance, not safety or endorsement. Read the source instructions before using this skill.

View on skills.sh (opens external page)Read SKILL.md on GitHub (opens external page)

Saved source preview

SKILL.md

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: html-presentations
description: Create beautiful, self-contained HTML presentations with navigation, animations, and responsive design - zero dependencies
closecode_version: 1.0.0
scope: any
provisionedAt: "2026-04-30T16:58:06.658Z"
provisionedFrom: templates/skills/html-presentations/SKILL.md
---

# HTML Presentations Skill

This skill teaches agents how to generate beautiful, self-contained, single-file HTML presentations. Every presentation is one `.html` file with all CSS and JavaScript inline — zero external dependencies, works offline, easy to share.

## 1. Core Principles

| Principle | Detail |
|---|---|
| **Single file** | One `.html` file — all styles and scripts inline |
| **Zero dependencies** | No CDN links, no external CSS/JS/fonts |
| **Responsive** | Desktop, tablet (<=1024px), mobile (<=640px) |
| **Accessible navigation** | Keyboard, mouse click, touch swipe, mouse wheel |
| **Print-ready** | `@media print` styles — one slide per page, no UI chrome |
| **Deep-linkable** | URL hash sync (`#slide-3`) with browser back/forward |
| **System fonts** | `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif` |

**File naming:** `<topic-slug>-presentation.html`
**Output location:** project root or `docs/presentations/`

---

## 2. Base Template

Always start from this template. Copy it, then customize slides.

```html
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentation Title</title>
<style>
/* ===== CSS Custom Properties (Theme) ===== */
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a2e;
  --color-heading: #16213e;
  --color-accent: #0f3460;
  --color-accent-light: #e2e8f0;
  --color-code-bg: #f1f5f9;
  --color-code-text: #334155;
  --color-slide-counter: #94a3b8;
  --color-progress: #0f3460;
  --color-nav-btn: rgba(15, 52, 96, 0.15);
  --color-nav-btn-hover: rgba(15, 52, 96, 0.3);
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
  --slide-padding: 80px;
  --transition-speed: 0.5s;
}

[data-theme="dark"] {
  --color-bg: #0f172a;
  --color-text: #e2e8f0;
  --color-heading: #f8fafc;
  --color-accent: #38bdf8;
  --color-accent-light: #1e293b;
  --color-code-bg: #1e293b;
  --color-code-text: #e2e8f0;
  --color-slide-counter: #64748b;
  --color-progress: #38bdf8;
  --color-nav-btn: rgba(56, 189, 248, 0.15);
  --color-nav-btn-hover: rgba(56, 189, 248, 0.3);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }

/* ===== Progress Bar ===== */
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--color-progress); transition: width 0.3s ease; z-index: 100; }

/* ===== Slide Container ===== */
.presentation { position: relative; width: 100%; height: 100vh; }
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: var(--slide-padding);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
  transform: translateX(40px);
}
.slide.active { opacity: 1; visibility: visible; transform: translateX(0); }
.slide.prev { opacity: 0; transform: translateX(-40px); }

/* Transition variants */
.slide.transition-fade { transform: none; }
.slide.transition-fade.prev { transform: none; }
.slide.transition-zoom { transform: scale(0.85); }
.slide.transition-zoom.prev { transform: scale(1.15); }
.slide.transition-none { transition: none; }

/* ===== Typography ===== */
.slide h1 { font-family: var(--font-heading); fon

Read the full source on GitHub

Context