frontend-slides

Frontend Slides

Crea presentaciones HTML ricas en animaciones, sin dependencias, 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 un deck para 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

No negociables

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 dentro de un viewport sin scroll interno.
3. Muestra, no digas: usa previsualizaciones visuales en lugar de cuestionarios abstractos de estilo.
4. Diseño distintivo: evita decks genéricos con gradientes morados, Inter sobre blanco o con apariencia de plantilla.
5. Calidad de producción: el código debe estar comentado, ser accesible, responsivo y eficiente.

Antes de generar, lee STYLE_PRESETS.md para la base CSS segura para el viewport, límites de densidad, catálogo de presets 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 en conferencia, actualización interna
• duración: corta (5-10), media (10-20), larga (más de 20)
• estado del contenido: texto terminado, notas aproximadas, solo el tema

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

3. Descubrir estilo

Por defecto, usar exploración visual.

Si el usuario ya conoce el preset deseado, omite las previsualizaciones y úsalo directamente.

En caso contrario:

1. Pregunta qué sensación debe crear el deck: impresionado, energético, enfocado, inspirado.
2. Genera 3 archivos de previsualización de una diapositiva en .ecc-design/slide-previews/.
3. Cada previsualización debe ser autocontenida, mostrar tipografía/color/movimiento claramente y mantenerse en aproximadamente 100 líneas de contenido de diapositiva.
4. Pregunta al usuario qué previsualización conservar o qué elementos combinar.

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

4. Construir la presentación

Genera:

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

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

Estructura requerida:

• secciones semánticas de diapositivas
• una base CSS segura para el viewport desde STYLE_PRESETS.md
• propiedades personalizadas CSS para valores de tema
• una clase controladora de presentación para navegación con teclado, rueda y toque
• Intersection Observer para animaciones de revelación
• soporte para movimiento reducido

5. Aplicar ajuste al viewport

Trátalo como una compuerta estricta.

Reglas:

• cada .slide debe usar height: 100vh; height: 100dvh; overflow: hidden;
• todo el texto 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 el deck terminado 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 con teclado funcione.

7. Entregar

En la entrega:

• elimina los archivos de previsualización temporales a menos que el usuario quiera conservarlos
• abre el deck con el abridor adecuado para la plataforma cuando sea útil
• resume la ruta del archivo, el preset usado, 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 archivo.html
• Linux: xdg-open archivo.html
• Windows: start "" archivo.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 de trabajo 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 te bases en herramientas solo 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 varios 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

Incluye:

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

Accesibilidad

• usa estructura semántica (main, section, nav)
• mantén el contraste legible
• soporta navegación solo con teclado
• respeta 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 + eslogan opcional
Contenido	1 encabezado + 4-6 viñetas o 2 párrafos cortos
Cuadrícula de características	Máximo 6 tarjetas
Código	Máximo 8-10 líneas
Cita	1 cita + atribución
Imagen	1 imagen limitada por el viewport

Antipatrones

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

Skills ECC relacionados

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

Lista de verificación de entrega

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