Detalle del Skill

html-presentations

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

CoincidenciaDirectaRevisado para presentación html

Fuenteez404-36/vroomlyFuente externa

Instalaciones reportadas1Solo señal de popularidad

Revisar antes de usar

La revisión automática comprueba relevancia, no seguridad ni respaldo. Lee las instrucciones de la fuente antes de usar este Skill.

Ver en skills.sh (abre una página externa)Leer SKILL.md en GitHub (abre una página externa)

Vista previa guardada

SKILL.md

Este extracto es una copia guardada durante la revisión. La fuente externa contiene la versión completa y actual.

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

Leer la fuente completa en GitHub

Contexto