Skill 详情

html-presentations

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

匹配类型直接匹配已针对 html 演示文稿审核

来源ez404-36/vroomly外部来源

报告安装量1仅表示受欢迎程度

使用前先检查

自动化审核只检查相关性，不代表安全审查或推荐。使用前请阅读来源中的说明。

在 skills.sh 查看（打开外部页面）在 GitHub 阅读 SKILL.md （打开外部页面）

已保存的来源预览

SKILL.md

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
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

在 GitHub 阅读完整来源