theus-cli-linux-x64 0.2.84

package/vendor/theus-arsenal/skills/presentaciones-html/animation-patterns.md

@@ -0,0 +1,122 @@
+# Referencia de patrones de animación
+
+Usa esta referencia al generar presentaciones. Ajusta las animaciones a la sensación buscada.
+
+## Guía efecto-a-sensación
+
+| Sensación | Animaciones | Pistas visuales |
+|-----------|-------------|-----------------|
+| **Dramático / Cinematográfico** | Fundidos lentos (1-1.5 s), transiciones de gran escala (0.9 a 1), parallax al hacer scroll | Fondos oscuros, efectos de foco, imágenes a sangre completa |
+| **Tecnológico / Futurista** | Brillo neón (box-shadow), texto glitch/scramble, revelados en retícula | Sistemas de partículas (canvas), patrones de retícula, acentos monoespaciados, cian/magenta/azul eléctrico |
+| **Lúdico / Amigable** | Easing elástico (física de resorte), flotación/balanceo | Esquinas redondeadas, colores pastel/vivos, elementos de trazo manual |
+| **Profesional / Corporativo** | Animaciones sutiles y rápidas (200-300 ms), diapositivas limpias | Azul marino/pizarra/carbón, espaciado preciso, foco en visualización de datos |
+| **Calmado / Minimal** | Movimiento muy lento y sutil, fundidos suaves | Mucho espacio en blanco, paleta apagada, tipografía serif, padding generoso |
+| **Editorial / Revista** | Revelados de texto escalonados, interacción imagen-texto | Jerarquía tipográfica fuerte, citas destacadas, layouts que rompen la retícula, titulares serif + cuerpo sans |
+
+## Animaciones de entrada
+
+```css
+/* Fundido + deslizamiento hacia arriba (la más versátil) */
+.reveal {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.6s var(--ease-out-expo),
+                transform 0.6s var(--ease-out-expo);
+}
+.visible .reveal {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Escalado de entrada */
+.reveal-scale {
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
+}
+.visible .reveal-scale {
+    opacity: 1;
+    transform: scale(1);
+}
+
+/* Deslizamiento desde la izquierda */
+.reveal-left {
+    opacity: 0;
+    transform: translateX(-50px);
+    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
+}
+.visible .reveal-left {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+/* Entrada con desenfoque */
+.reveal-blur {
+    opacity: 0;
+    filter: blur(10px);
+    transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);
+}
+.visible .reveal-blur {
+    opacity: 1;
+    filter: blur(0);
+}
+```
+
+## Efectos de fondo
+
+```css
+/* Malla de gradientes — gradientes radiales en capas para dar profundidad */
+.gradient-bg {
+    background:
+        radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
+        var(--bg-primary);
+}
+
+/* Textura de ruido — SVG inline para el grano */
+.noise-bg {
+    background-image: url("data:image/svg+xml,..."); /* Ruido SVG inline */
+}
+
+/* Patrón de retícula — líneas estructurales sutiles */
+.grid-bg {
+    background-image:
+        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+    background-size: 50px 50px;
+}
+```
+
+## Efectos interactivos
+
+```javascript
+/* Inclinación 3D al pasar el ratón — añade profundidad a tarjetas/paneles */
+class TiltEffect {
+    constructor(element) {
+        this.element = element;
+        this.element.style.transformStyle = 'preserve-3d';
+        this.element.style.perspective = '1000px';
+
+        this.element.addEventListener('mousemove', (e) => {
+            const rect = this.element.getBoundingClientRect();
+            const x = (e.clientX - rect.left) / rect.width - 0.5;
+            const y = (e.clientY - rect.top) / rect.height - 0.5;
+            this.element.style.transform = `rotateY(${x * 10}deg) rotateX(${-y * 10}deg)`;
+        });
+
+        this.element.addEventListener('mouseleave', () => {
+            this.element.style.transform = 'rotateY(0) rotateX(0)';
+        });
+    }
+}
+```
+
+## Resolución de problemas
+
+| Problema | Solución |
+|----------|----------|
+| Las fuentes no cargan | Revisa la URL de Fontshare/Google Fonts; verifica que los nombres de fuente coincidan en el CSS |
+| Las animaciones no se disparan | Verifica que el Intersection Observer corre; comprueba que la clase `.visible` se está añadiendo |
+| El scroll snap no funciona | Asegura `scroll-snap-type: y mandatory` en html; cada diapositiva necesita `scroll-snap-align: start` |
+| Problemas en móvil | Desactiva efectos pesados en el breakpoint de 768px; prueba los eventos táctiles; reduce el número de partículas |
+| Problemas de rendimiento | Usa `will-change` con moderación; prefiere animaciones de `transform`/`opacity`; limita (throttle) los handlers de scroll |

package/vendor/theus-arsenal/skills/presentaciones-html/html-template.md

@@ -0,0 +1,419 @@
+# Plantilla de presentación HTML
+
+Arquitectura de referencia para generar presentaciones. Toda presentación sigue esta estructura.
+
+## Estructura HTML base
+
+```html
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Título de la presentación</title>
+
+    <!-- Fuentes: usa Fontshare o Google Fonts — nunca fuentes del sistema -->
+    <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=..." />
+
+    <style>
+      /* ===========================================
+           PROPIEDADES PERSONALIZADAS DE CSS (TEMA)
+           Cambia estos valores para cambiar todo el aspecto
+           =========================================== */
+      :root {
+        /* Colores — del preset de estilo elegido */
+        --bg-primary: #0a0f1c;
+        --bg-secondary: #111827;
+        --text-primary: #ffffff;
+        --text-secondary: #9ca3af;
+        --accent: #00ffcc;
+        --accent-glow: rgba(0, 255, 204, 0.3);
+
+        /* Tipografía — DEBE usar clamp() */
+        --font-display: "Clash Display", sans-serif;
+        --font-body: "Satoshi", sans-serif;
+        --title-size: clamp(2rem, 6vw, 5rem);
+        --subtitle-size: clamp(0.875rem, 2vw, 1.25rem);
+        --body-size: clamp(0.75rem, 1.2vw, 1rem);
+
+        /* Espaciado — DEBE usar clamp() */
+        --slide-padding: clamp(1.5rem, 4vw, 4rem);
+        --content-gap: clamp(1rem, 2vw, 2rem);
+
+        /* Animación */
+        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+        --duration-normal: 0.6s;
+      }
+
+      /* ===========================================
+           ESTILOS BASE
+           =========================================== */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      /* --- PEGA AQUÍ EL CONTENIDO DE viewport-base.css --- */
+
+      /* ===========================================
+           ANIMACIONES
+           Se disparan vía la clase .visible (añadida por JS al hacer scroll)
+           =========================================== */
+      .reveal {
+        opacity: 0;
+        transform: translateY(30px);
+        transition:
+          opacity var(--duration-normal) var(--ease-out-expo),
+          transform var(--duration-normal) var(--ease-out-expo);
+      }
+
+      .slide.visible .reveal {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      /* Escalonado de hijos para revelado secuencial */
+      .reveal:nth-child(1) {
+        transition-delay: 0.1s;
+      }
+      .reveal:nth-child(2) {
+        transition-delay: 0.2s;
+      }
+      .reveal:nth-child(3) {
+        transition-delay: 0.3s;
+      }
+      .reveal:nth-child(4) {
+        transition-delay: 0.4s;
+      }
+
+      /* ... estilos específicos del preset ... */
+    </style>
+  </head>
+  <body>
+    <!-- Opcional: barra de progreso -->
+    <div class="progress-bar"></div>
+
+    <!-- Opcional: puntos de navegación -->
+    <nav class="nav-dots"><!-- Generados por JS --></nav>
+
+    <!-- Diapositivas -->
+    <section class="slide title-slide">
+      <h1 class="reveal">Título de la presentación</h1>
+      <p class="reveal">Subtítulo o autor</p>
+    </section>
+
+    <section class="slide">
+      <div class="slide-content">
+        <h2 class="reveal">Título de la diapositiva</h2>
+        <p class="reveal">Contenido...</p>
+      </div>
+    </section>
+
+    <!-- Más diapositivas... -->
+
+    <script>
+      /* ===========================================
+           CONTROLADOR DE LA PRESENTACIÓN
+           =========================================== */
+      class SlidePresentation {
+        constructor() {
+          this.slides = document.querySelectorAll(".slide");
+          this.currentSlide = 0;
+          this.setupIntersectionObserver();
+          this.setupKeyboardNav();
+          this.setupTouchNav();
+          this.setupProgressBar();
+          this.setupNavDots();
+        }
+
+        setupIntersectionObserver() {
+          // Añade la clase .visible cuando las diapositivas entran al viewport
+          // Dispara las animaciones CSS de forma eficiente
+        }
+
+        setupKeyboardNav() {
+          // Flechas, Espacio, Av Pág/Re Pág
+        }
+
+        setupTouchNav() {
+          // Soporte táctil/deslizamiento para móvil
+        }
+
+        setupProgressBar() {
+          // Actualiza la barra de progreso al hacer scroll
+        }
+
+        setupNavDots() {
+          // IMPORTANTE: limpiar siempre antes de construir — si el outerHTML se
+          // capturó con los puntos ya renderizados, reabrir el archivo añadiría
+          // un conjunto duplicado encima de los existentes.
+          this.navDotsContainer.innerHTML = "";
+          // Genera y gestiona los puntos de navegación
+        }
+      }
+
+      new SlidePresentation();
+    </script>
+  </body>
+</html>
+```
+
+## Funcionalidades JavaScript requeridas
+
+Toda presentación debe incluir:
+
+1. **Clase SlidePresentation** — controlador principal con:
+   - Navegación por teclado (flechas, espacio, av/re página)
+   - Soporte táctil/deslizamiento
+   - Navegación por rueda del ratón
+   - Actualización de la barra de progreso
+   - Puntos de navegación
+
+2. **Intersection Observer** — para animaciones disparadas por scroll:
+   - Añadir la clase `.visible` cuando las diapositivas entran al viewport
+   - Disparar las transiciones CSS de forma eficiente
+
+3. **Mejoras opcionales** (según el estilo elegido):
+   - Cursor personalizado con estela
+   - Sistema de partículas de fondo (canvas)
+   - Efectos parallax
+   - Inclinación 3D al pasar el ratón
+   - Botones magnéticos
+   - Animaciones de contador
+
+4. **Edición inline** (solo si el usuario aceptó en la Fase 1 — omítela por completo si dijo que no):
+   - Botón de alternancia de edición (oculto por defecto, revelado vía zona caliente de hover o tecla `E`)
+   - Autoguardado en localStorage
+   - Funcionalidad de exportar/guardar archivo
+   - Ver la sección "Implementación de edición inline" más abajo
+
+## Implementación de edición inline (solo opt-in)
+
+**Si el usuario eligió "No" para la edición inline en la Fase 1, NO generes ningún HTML, CSS o JS relacionado con edición.**
+
+**NO uses el selector de hermanos `~` de CSS para mostrar/ocultar basado en hover.** El enfoque solo-CSS (`edit-hotzone:hover ~ .edit-toggle`) falla porque `pointer-events: none` en el botón rompe la cadena de hover: el usuario pasa por la zona caliente -> el botón se vuelve visible -> el ratón se mueve hacia el botón -> sale de la zona caliente -> el botón desaparece antes del clic.
+
+**Enfoque requerido: hover con JS y un timeout de gracia de 400 ms.**
+
+HTML:
+
+```html
+<div class="edit-hotzone"></div>
+<button class="edit-toggle" id="editToggle" title="Modo edición (E)">Editar</button>
+```
+
+CSS (la visibilidad la controlan solo las clases puestas por JS):
+
+```css
+/* ¡NO usar el selector de hermanos ~ de CSS para esto!
+   pointer-events: none rompe la cadena de hover.
+   Hay que usar JS con timeout de gracia. */
+.edit-hotzone {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 80px;
+  height: 80px;
+  z-index: 10000;
+  cursor: pointer;
+}
+.edit-toggle {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: 10001;
+}
+.edit-toggle.show,
+.edit-toggle.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+```
+
+JS (tres métodos de interacción):
+
+```javascript
+// 1. Handler de clic en el botón de alternancia
+document.getElementById("editToggle").addEventListener("click", () => {
+  editor.toggleEditMode();
+});
+
+// 2. Hover en la zona caliente con periodo de gracia de 400 ms
+const hotzone = document.querySelector(".edit-hotzone");
+const editToggle = document.getElementById("editToggle");
+let hideTimeout = null;
+
+hotzone.addEventListener("mouseenter", () => {
+  clearTimeout(hideTimeout);
+  editToggle.classList.add("show");
+});
+hotzone.addEventListener("mouseleave", () => {
+  hideTimeout = setTimeout(() => {
+    if (!editor.isActive) editToggle.classList.remove("show");
+  }, 400);
+});
+editToggle.addEventListener("mouseenter", () => {
+  clearTimeout(hideTimeout);
+});
+editToggle.addEventListener("mouseleave", () => {
+  hideTimeout = setTimeout(() => {
+    if (!editor.isActive) editToggle.classList.remove("show");
+  }, 400);
+});
+
+// 3. Clic directo en la zona caliente
+hotzone.addEventListener("click", () => {
+  editor.toggleEditMode();
+});
+
+// 4. Atajo de teclado (tecla E, ignorado mientras se edita texto)
+document.addEventListener("keydown", (e) => {
+  if (
+    (e.key === "e" || e.key === "E") &&
+    !e.target.getAttribute("contenteditable")
+  ) {
+    editor.toggleEditMode();
+  }
+});
+```
+
+**CRÍTICO: `exportFile()` debe eliminar el estado de edición antes de capturar el outerHTML.**
+
+Cuando el usuario presiona Ctrl+S en modo edición, `document.documentElement.outerHTML` captura el DOM vivo —
+incluyendo `body.edit-active`, `contenteditable="true"` en cada elemento de texto y las clases `.active`/`.show` en
+el botón y el banner. Quien abra el archivo guardado verá contornos discontinuos, un botón con check y un banner de
+edición, como si el archivo hubiera quedado atascado permanentemente en modo edición.
+
+Implementa siempre `exportFile()` así:
+
+```javascript
+exportFile() {
+    // Elimina temporalmente el estado de edición para que el archivo guardado abra limpio
+    const editableEls = Array.from(document.querySelectorAll('[contenteditable]'));
+    editableEls.forEach(el => el.removeAttribute('contenteditable'));
+    document.body.classList.remove('edit-active');
+
+    // Elimina también las clases de UI del botón y del banner
+    const editToggle = document.getElementById('editToggle');
+    const editBanner = document.querySelector('.edit-banner');
+    editToggle?.classList.remove('active', 'show');
+    editBanner?.classList.remove('active', 'show');
+
+    const html = '<!DOCTYPE html>\n' + document.documentElement.outerHTML;
+
+    // Restaura el estado de edición para que el usuario pueda seguir editando
+    document.body.classList.add('edit-active');
+    editableEls.forEach(el => el.setAttribute('contenteditable', 'true'));
+    editToggle?.classList.add('active');
+    editBanner?.classList.add('active');
+
+    const blob = new Blob([html], { type: 'text/html' });
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob);
+    a.download = 'presentacion.html';
+    a.click();
+    URL.revokeObjectURL(a.href);
+}
+```
+
+## Pipeline de imágenes (omitir si no hay imágenes)
+
+Si el usuario eligió "sin imágenes" en la Fase 1, omite esta sección por completo. Si aportó imágenes, procésalas antes de generar el HTML.
+
+**Dependencia:** `pip install Pillow`
+
+### Procesamiento de imágenes
+
+```python
+from PIL import Image, ImageDraw
+
+# Recorte circular (para logos en estilos modernos/limpios)
+def crop_circle(input_path, output_path):
+    img = Image.open(input_path).convert('RGBA')
+    w, h = img.size
+    size = min(w, h)
+    left, top = (w - size) // 2, (h - size) // 2
+    img = img.crop((left, top, left + size, top + size))
+    mask = Image.new('L', (size, size), 0)
+    ImageDraw.Draw(mask).ellipse([0, 0, size, size], fill=255)
+    img.putalpha(mask)
+    img.save(output_path, 'PNG')
+
+# Redimensionar (para imágenes sobredimensionadas que inflan el HTML)
+def resize_max(input_path, output_path, max_dim=1200):
+    img = Image.open(input_path)
+    img.thumbnail((max_dim, max_dim), Image.LANCZOS)
+    img.save(output_path, quality=85)
+```
+
+| Situación                             | Operación                       |
+| ------------------------------------- | ------------------------------- |
+| Logo cuadrado en estética redondeada  | `crop_circle()`                 |
+| Imagen > 1 MB                         | `resize_max(max_dim=1200)`      |
+| Relación de aspecto incorrecta        | Recorte manual con `img.crop()` |
+
+Guarda las imágenes procesadas con el sufijo `_processed`. Nunca sobrescribas los originales.
+
+### Colocación de imágenes
+
+**Usa rutas de archivo directas** (no base64) — las presentaciones se ven en local:
+
+```html
+<img src="assets/logo_round.png" alt="Logo" class="slide-image logo" />
+<img
+  src="assets/screenshot.png"
+  alt="Captura de pantalla"
+  class="slide-image screenshot"
+/>
+```
+
+```css
+.slide-image {
+  max-width: 100%;
+  max-height: min(50vh, 400px);
+  object-fit: contain;
+  border-radius: 8px;
+}
+.slide-image.screenshot {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+.slide-image.logo {
+  max-height: min(30vh, 200px);
+}
+```
+
+**Adapta los colores de borde/sombra al acento del estilo elegido.** Nunca repitas la misma imagen en varias diapositivas (excepto logos en la de título y la de cierre).
+
+**Patrones de colocación:** logo centrado en la diapositiva de título. Capturas de pantalla en layouts de dos columnas junto al texto. Imágenes a sangre completa como fondo de diapositiva con texto superpuesto (usar con moderación).
+
+---
+
+## Calidad de código
+
+**Comentarios:** cada sección necesita comentarios claros que expliquen qué hace y cómo modificarla.
+
+**Accesibilidad:**
+
+- HTML semántico (`<section>`, `<nav>`, `<main>`)
+- La navegación por teclado funciona por completo
+- Etiquetas ARIA donde haga falta
+- Soporte de `prefers-reduced-motion` (incluido en viewport-base.css)
+
+## Estructura de archivos
+
+Presentaciones individuales:
+
+```
+presentacion.html    # Autocontenida, todo el CSS/JS inline
+assets/              # Solo imágenes, si las hay
+```
+
+Varias presentaciones en un proyecto:
+
+```
+[nombre].html
+[nombre]-assets/
+```