Skill Global es
Presentaciones Reveal.js
Genera presentaciones profesionales como archivos HTML con Reveal.js. Incluye workflow completo: planificar estructura, scaffold, CSS con variables, layouts de columnas, gráficos Chart.js, iconos Font Awesome y verificación de desbordamiento.
Contenido completo
---
name: reveal-presentation
description: Use this skill whenever the user asks to create slides, a presentation, a deck, or a slideshow. Generates self-contained HTML presentations with Reveal.js via CDN — no build step required. Supports themes, multi-column layouts, code highlighting, animations, speaker notes, charts, and custom styling.
---
# Presentaciones Reveal.js
## Workflow
### Step 1 — Planificar la estructura
- Determinar número de slides y tipos: portada, divisores de sección, contenido, cierre
- Decidir si se necesitan stacks verticales para contenido detallado
- Elegir paleta de colores según el tema/sector/audiencia
### Step 2 — Generar el scaffold HTML
```html
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentación</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="title" class="section-divider"><h1>Título</h1></section>
<section id="slide-2"><h2>Contenido</h2><div class="content">...</div></section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
<script>
Reveal.initialize({
width: 1280, height: 720, margin: 0,
controls: true, progress: true, slideNumber: false,
hash: true, transition: 'slide', center: false
});
</script>
</body>
</html>
```
### Step 3 — CSS con variables
```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
:root {
--background-color: #ffffff;
--heading-font: "Inter", Helvetica, sans-serif;
--body-font: "Inter", Helvetica, sans-serif;
--text-size: 16pt;
--h1-size: 48pt;
--h2-size: 36pt;
--h3-size: 24pt;
--primary-color: #1F4E79;
--secondary-color: #DAA520;
--text-color: #222;
--muted-color: #666;
}
.reveal .slides section { padding: 40px 60px; text-align: left; }
.reveal h1, .reveal h2, .reveal h3 {
font-family: var(--heading-font); text-transform: none;
color: var(--text-color);
}
.reveal h1 { font-size: var(--h1-size); }
.reveal h2 { font-size: var(--h2-size); }
.reveal h3 { font-size: var(--h3-size); }
.reveal p, .reveal li { font-size: var(--text-size); color: var(--text-color); }
.text-lg { font-size: 18pt; }
.text-xl { font-size: 20pt; }
.text-2xl { font-size: 24pt; }
.text-muted { color: var(--muted-color); }
.text-center { text-align: center; }
.reveal blockquote {
border-left: 4px solid var(--primary-color);
padding-left: 20px; margin: 20px 0;
font-style: italic; width: 100%; background: none; box-shadow: none;
}
.reveal blockquote cite {
display: block; margin-top: 10px;
font-style: normal; color: var(--muted-color);
}
.section-divider { text-align: center !important; }
.section-divider h1 { font-size: var(--h1-size); color: var(--primary-color); }
.footnote { font-size: 10pt; color: var(--muted-color); margin-top: 20px; }
```
### Step 4 — Patrones de contenido
**Columnas (siempre inline grid):**
```html
<!-- 2 columnas iguales -->
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:30px;">
<div><p>Columna 1</p></div>
<div><p>Columna 2</p></div>
</div>
<!-- 3 columnas -->
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:25px;">
<div><p>A</p></div>
<div><p>B</p></div>
<div><p>C</p></div>
</div>
<!-- Columnas desiguales -->
<div style="display:grid;grid-template-columns:1fr 2fr;gap:30px;">
<div><p>Lateral</p></div>
<div><p>Principal</p></div>
</div>
```
**Tarjetas / Stats:**
```html
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;">
<div style="background:var(--primary-color);color:#fff;padding:20px;border-radius:12px;">
<p style="font-size:36pt;font-weight:700;margin:0;">15%</p>
<p style="font-size:14pt;margin:0;">Crecimiento</p>
</div>
<div style="background:var(--secondary-color);color:#fff;padding:20px;border-radius:12px;">
<p style="font-size:36pt;font-weight:700;margin:0;">2.5x</p>
<p style="font-size:14pt;margin:0;">ROI</p>
</div>
<div style="background:#222;color:#fff;padding:20px;border-radius:12px;">
<p style="font-size:36pt;font-weight:700;margin:0;">200+</p>
<p style="font-size:14pt;margin:0;">Clientes</p>
</div>
</div>
```
**Iconos Font Awesome:**
```html
<i class="fa-solid fa-lightbulb"></i>
<i class="fa-solid fa-check"></i>
<i class="fa-solid fa-chart-line"></i>
```
### Step 5 — Gráficos (Chart.js)
```html
<section style="display:flex;flex-direction:column;height:100%;">
<h2>Título del gráfico</h2>
<div style="flex:1;position:relative;min-height:0;">
<canvas data-chart="bar">
<!--
{
"data": {
"labels": ["Q1","Q2","Q3","Q4"],
"datasets": [{"label":"Ingresos","data":[12,19,8,15]}]
},
"options": {"maintainAspectRatio":false}
}
-->
</canvas>
</div>
</section>
```
### Step 6 — Verificar y entregar
1. Abrir el HTML en el navegador
2. Revisar que no haya desbordamiento de contenido
3. Verificar colores en fondos claros y oscuros
4. Exportar a PDF: añadir `?print-pdf` a la URL e imprimir
## Principios de diseño
- **Usar `pt` para tamaños de fuente** — slides son tamaño fijo, `pt` es predecible. NUNCA usar `em`, `rem` o `px` para texto.
- **Estado el enfoque de diseño ANTES de escribir código** — analizar tema, audiencia, branding
- **Variar layouts entre slides** — no repetir el mismo patrón en slides consecutivos
- **Texto scannable** — bullets cortos, una idea principal por slide
- **Contenido escaso → texto más grande** — usar `.text-lg`, `.text-xl` para llenar espacio
- **Todo texto visible dentro de `<p>`, `<li>` o `<h1>`–`<h6>`** — nunca texto directo en `<span>` o `<div>`
- **CSS class para patrones repetidos** (3+ veces), inline styles para layouts únicos
## Paletas de colores por sector
| Sector | Primario | Secundario | Terciario |
|--------|----------|------------|-----------|
| Legal | `#1F4E79` Navy | `#DAA520` Gold | `#F4F1DE` Cream |
| Tech | `#007ACC` Azure | `#28A745` Green | `#F4F6F6` Silver |
| Finanzas | `#2C3E50` Dark | `#27AE60` Emerald | `#ECF0F1` Light |
| Healthcare | `#0066CC` Medical | `#00A651` Health | `#F8F9FA` White |
| Educación | `#3498DB` Bright | `#2ECC71` Emerald | `#FDFEFE` Pure |
| Creativo | `#FF6B6B` Coral | `#4ECDC4` Teal | `#FFF5F5` Blush |
| Luxury | `#5D1D2E` Burgundy | `#997929` Gold | `#F4F6F6` Cream |
## Configuración Reveal.js
```javascript
Reveal.initialize({
controls: true, // Flechas de navegación
progress: true, // Barra de progreso
slideNumber: false, // Números de slide
hash: true, // URL hash por slide
transition: 'slide', // none/fade/slide/convex/concave/zoom
center: false, // false = alinear arriba (mejor para contenido denso)
autoSlide: 0, // 0 = desactivado
});
```
## Clases integradas de Reveal.js
- `r-fit-text` — auto-ajustar texto al slide
- `r-stretch` — estirar elemento al espacio vertical restante
- `r-stack` — apilar elementos
```html
<h1 class="r-fit-text">TEXTO GRANDE</h1>
<img class="r-stretch" src="image.jpg">
```
## Exportar a PDF
1. Añadir `?print-pdf` a la URL del navegador
2. Imprimir (Ctrl+P / Cmd+P) → Guardar como PDF
3. Añadir `?print-pdf&pdfSeparateFragments=false` para incluir todos los fragmentos