theus-cli-linux-x64 1.2.2 → 1.4.0

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

@@ -1,122 +0,0 @@
-# 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

@@ -1,419 +0,0 @@
-# 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/
-```