Skill-Details

html-presentations

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

ÜbereinstimmungDirektGeprüft für html-präsentation

Quelleez404-36/vroomlyExterne Quelle

Gemeldete Installationen1Nur Popularitätssignal

Vor Nutzung prüfen

Die automatische Prüfung bewertet Relevanz, nicht Sicherheit oder Empfehlung. Lies vor der Nutzung die Quellanweisungen.

Auf skills.sh ansehen (öffnet externe Seite)SKILL.md auf GitHub lesen (öffnet externe Seite)

Gespeicherte Quellvorschau

SKILL.md

Dieser Auszug wurde bei der Prüfung gespeichert. Die externe Quelle enthält die vollständige und aktuelle 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

Vollständige Quelle auf GitHub lesen

Kontext