Diapositivas Frontend

¿Qué hace Diapositivas Frontend?

Crea presentaciones HTML sin dependencias, ricas en animaciones, que se ejecutan completamente en el navegador.

Inspirado en el enfoque de exploración visual mostrado en el trabajo de zarazhangrui (crédito: @zarazhangrui).

Cuándo activarlo

• Crear una presentación para una charla, pitch, taller o presentación interna
• Convertir diapositivas .ppt o .pptx en una presentación HTML
• Mejorar el diseño, movimiento o tipografía de una presentación HTML existente
• Explorar estilos de presentación con un usuario que aún no conoce su preferencia de diseño

Innegociables

1. Sin dependencias: por defecto, un único archivo HTML autocontenido con CSS y JS en línea.
2. El ajuste al viewport es obligatorio: cada diapositiva debe caber en un solo viewport sin desplazamiento interno.
3. Mostrar, no decir: usar vistas previas visuales en lugar de cuestionarios de estilo abstractos.
4. Diseño distintivo: evitar gradientes morados genéricos, Inter sobre blanco y plantillas comunes.
5. Calidad de producción: mantener el código comentado, accesible, responsivo y eficiente.

Antes de generar, lee STYLE_PRESETS.md para la base CSS segura para viewport, límites de densidad, catálogo de ajustes y errores comunes de CSS.

Flujo de trabajo

1. Detectar modo

Elige un camino:

• Nueva presentación: el usuario tiene un tema, notas o un borrador completo
• Conversión de PPT: el usuario tiene un .ppt o .pptx
• Mejora: el usuario ya tiene diapositivas HTML y desea mejoras

2. Descubrir contenido

Pregunta solo lo mínimo necesario:

• propósito: pitch, enseñanza, charla de conferencia, actualización interna
• duración: corta (5-10), media (10-20), larga (20+)
• estado del contenido: texto terminado, notas aproximadas, solo tema

Si el usuario tiene contenido, pídele que lo pegue antes de aplicar estilo.

3. Descubrir estilo

Por defecto, explora visualmente.

Si el usuario ya conoce el ajuste deseado, omite las vistas previas y úsalo directamente.

De lo contrario:

1. Pregunta qué sensación debe transmitir la presentación: impresionado, con energía, concentrado, inspirado.
2. Genera 3 archivos de vista previa de una sola diapositiva en .ecc-design/slide-previews/.
3. Cada vista previa debe ser autocontenida, mostrar tipografía/color/movimiento claramente y tener menos de unas 100 líneas de contenido de diapositiva.
4. Pregunta al usuario qué vista previa conservar o qué elementos mezclar.

Usa la guía de ajustes en STYLE_PRESETS.md al mapear el estado de ánimo al estilo.

4. Construir la presentación

Genera:

• presentation.html
• [nombre-presentacion].html

Usa una carpeta assets/ solo cuando la presentación contenga imágenes extraídas o proporcionadas por el usuario.

Estructura requerida:

• secciones de diapositivas semánticas
• una base CSS segura para viewport de STYLE_PRESETS.md
• propiedades personalizadas CSS para los valores del tema
• una clase de controlador de presentación para navegación con teclado, rueda y táctil
• Intersection Observer para animaciones de revelado
• soporte para movimiento reducido

5. Asegurar el ajuste al viewport

Trátalo como una puerta de acceso obligatoria.

Reglas:

• cada .slide debe usar height: 100vh; height: 100dvh; overflow: hidden;
• todo el tipo y espaciado debe escalar con clamp()
• cuando el contenido no quepa, dividir en varias diapositivas
• nunca resolver el desbordamiento reduciendo el texto por debajo de tamaños legibles
• nunca permitir barras de desplazamiento dentro de una diapositiva

Usa los límites de densidad y el bloque CSS obligatorio en STYLE_PRESETS.md.

6. Validar

Verifica la presentación terminada en estos tamaños:

• 1920x1080
• 1280x720
• 768x1024
• 375x667
• 667x375

Si la automatización del navegador está disponible, úsala para verificar que ninguna diapositiva se desborde y que la navegación por teclado funcione.

7. Entregar

Al entregar:

• eliminar los archivos temporales de vista previa a menos que el usuario quiera conservarlos
• abrir la presentación con el abridor adecuado para la plataforma cuando sea útil
• resumir la ruta del archivo, el ajuste utilizado, el número de diapositivas y los puntos fáciles de personalización del tema

Usa el abridor correcto para el SO actual:

• macOS: open file.html
• Linux: xdg-open file.html
• Windows: start "" file.html

Conversión de PPT / PPTX

Para la conversión de PowerPoint:

1. Prefiere python3 con python-pptx para extraer texto, imágenes y notas.
2. Si python-pptx no está disponible, pregunta si instalarlo o recurrir a un flujo manual basado en exportación.
3. Conserva el orden de las diapositivas, las notas del orador y los activos extraídos.
4. Después de la extracción, ejecuta el mismo flujo de selección de estilo que para una presentación nueva.

Mantén la conversión multiplataforma. No dependas de herramientas exclusivas de macOS cuando Python pueda hacer el trabajo.

Requisitos de implementación

HTML / CSS

• Usa CSS y JS en línea a menos que el usuario quiera explícitamente un proyecto de múltiples archivos.
• Las fuentes pueden venir de Google Fonts o Fontshare.
• Prefiere fondos atmosféricos, jerarquía tipográfica fuerte y una dirección visual clara.
• Usa formas abstractas, gradientes, cuadrículas, ruido y geometría en lugar de ilustraciones.

JavaScript

Incluir:

• navegación por teclado
• navegación táctil / deslizamiento
• navegación con rueda del ratón
• indicador de progreso o índice de diapositivas
• disparadores de animación al entrar

Accesibilidad

• usar estructura semántica (main, section, nav)
• mantener contraste legible
• admitir navegación solo con teclado
• respetar prefers-reduced-motion

Límites de densidad de contenido

Usa estos máximos a menos que el usuario pida explícitamente diapositivas más densas y la legibilidad se mantenga:

Tipo de diapositiva	Límite
Título	1 encabezado + 1 subtítulo + tagline opcional
Contenido	1 encabezado + 4-6 viñetas o 2 párrafos cortos
Cuadrícula de características	6 tarjetas máximo
Código	8-10 líneas máximo
Cita	1 cita + atribución
Imagen	1 imagen limitada por el viewport

Antipatrones

• gradientes de inicio genéricos sin identidad visual
• presentaciones con fuentes del sistema a menos que sea intencionadamente editorial
• muros largos de viñetas
• bloques de código que necesitan desplazamiento
• cajas de contenido con altura fija que se rompen en pantallas cortas
• funciones CSS negadas inválidas como -clamp(...)

Habilidades relacionadas de ECC

• frontend-patterns para patrones de componentes e interacción alrededor de la presentación
• liquid-glass-design cuando una presentación toma prestada intencionadamente la estética de vidrio de Apple
• e2e-testing si necesitas verificación automatizada del navegador para la presentación final

Lista de verificación de entrega

• la presentación se ejecuta desde un archivo local en un navegador
• cada diapositiva cabe en el viewport sin desplazamiento
• el estilo es distintivo e intencionado
• la animación es significativa, no ruidosa
• se respeta el movimiento reducido
• las rutas de archivo y los puntos de personalización se explican al entregar