theus-cli-linux-x64 0.2.84

package/vendor/theus-arsenal/skills/plano-tecnico/SKILL.md

@@ -0,0 +1,102 @@
+---
+name: plano-tecnico
+description: >-
+  Convierte un objetivo de una línea en un plan de construcción paso a paso
+  para proyectos de ingeniería multi-sesión y multi-agente. Cada paso incluye
+  un brief de contexto autocontenido para que un agente nuevo pueda ejecutarlo
+  en frío. Incluye compuerta de revisión adversarial, grafo de dependencias,
+  detección de pasos paralelos, catálogo de antipatrones y protocolo de
+  mutación del plan.
+  ACTIVAR cuando: el usuario pide un plan, plano técnico o roadmap para una
+  tarea compleja de múltiples PR, o describe trabajo que requiere varias
+  sesiones.
+  NO ACTIVAR cuando: la tarea se completa en un solo PR o con menos de 3
+  llamadas a herramientas, o el usuario dice "hazlo y ya".
+---
+
+# Plano técnico — Generador de planes de construcción
+
+Convierte un objetivo de una línea en un plan de construcción paso a paso que cualquier agente de código puede ejecutar en frío.
+
+## Cuándo usarla
+
+- Dividir una funcionalidad grande en múltiples PR con un orden de dependencias claro
+- Planificar un refactor o migración que abarca varias sesiones
+- Coordinar flujos de trabajo paralelos entre subagentes
+- Cualquier tarea donde la pérdida de contexto entre sesiones causaría retrabajo
+
+**No la uses** para tareas completables en un solo PR, con menos de 3 llamadas a herramientas, o cuando el usuario dice "hazlo y ya".
+
+## Cómo funciona
+
+El plano técnico ejecuta un pipeline de 5 fases:
+
+1. **Investigación** — Verificaciones previas (git, autenticación de gh, remote, rama por defecto) y luego lee la estructura del proyecto, los planes existentes y los archivos de memoria para reunir contexto.
+2. **Diseño** — Descompone el objetivo en pasos del tamaño de un PR (típicamente 3–12). Asigna aristas de dependencia, orden paralelo/serial, nivel de modelo (modelo premium vs. modelo estándar del catálogo Theus) y estrategia de rollback por paso.
+3. **Borrador** — Escribe un plan autocontenido en Markdown en `plans/`. Cada paso incluye un brief de contexto, lista de tareas, comandos de verificación y criterios de salida — de modo que un agente nuevo pueda ejecutar cualquier paso sin leer los pasos anteriores.
+4. **Revisión** — Delega una revisión adversarial a un subagente con el modelo premium del catálogo Theus, contra una checklist y un catálogo de antipatrones. Corrige todos los hallazgos críticos antes de finalizar.
+5. **Registro** — Guarda el plan, actualiza el índice de memoria y presenta al usuario el conteo de pasos y el resumen de paralelismo.
+
+El plano técnico detecta automáticamente la disponibilidad de git/gh. Con git + GitHub CLI genera planes con flujo completo de rama/PR/CI. Sin ellos, cambia a modo directo (edición en el sitio, sin ramas).
+
+## Ejemplos
+
+### Uso básico
+
+```
+/plano-tecnico myapp "migrar la base de datos a PostgreSQL"
+```
+
+Produce `plans/myapp-migrar-la-base-de-datos-a-postgresql.md` con pasos como:
+- Paso 1: Agregar el driver de PostgreSQL y la configuración de conexión
+- Paso 2: Crear scripts de migración para cada tabla
+- Paso 3: Actualizar la capa de repositorio para usar el nuevo driver
+- Paso 4: Agregar tests de integración contra PostgreSQL
+- Paso 5: Eliminar el código y la configuración de la base de datos antigua
+
+### Proyecto multi-agente
+
+```
+/plano-tecnico chatbot "extraer los proveedores de LLM a un sistema de plugins"
+```
+
+Produce un plan con pasos paralelos donde es posible (p. ej., "implementar el plugin del proveedor A" e "implementar el plugin del proveedor B" corren en paralelo una vez terminado el paso de la interfaz del plugin), asignaciones de nivel de modelo (modelo premium del catálogo Theus para el paso de diseño de la interfaz, modelo estándar para la implementación) e invariantes verificados después de cada paso (p. ej., "todos los tests existentes pasan", "no hay imports de proveedores en el núcleo").
+
+## Características clave
+
+- **Ejecución en frío** — Cada paso incluye un brief de contexto autocontenido. No se necesita contexto previo.
+- **Compuerta de revisión adversarial** — Cada plan es revisado por un subagente con el modelo premium del catálogo Theus, contra una checklist que cubre completitud, corrección de dependencias y detección de antipatrones.
+- **Flujo de rama/PR/CI** — Integrado en cada paso. Degrada con gracia a modo directo cuando git/gh no están presentes.
+- **Detección de pasos paralelos** — El grafo de dependencias identifica pasos sin archivos compartidos ni dependencias de salida.
+- **Protocolo de mutación del plan** — Los pasos pueden dividirse, insertarse, omitirse, reordenarse o abandonarse con protocolos formales y rastro de auditoría.
+- **Riesgo de ejecución cero** — Skill de Markdown puro. El directorio de la skill contiene solo archivos `.md` — sin hooks, sin scripts de shell, sin código ejecutable, sin `package.json`, sin paso de build. Nada se ejecuta al instalar o invocar más allá del cargador nativo de skills en Markdown de Theus.
+
+## Instalación
+
+Esta skill se distribuye con el arsenal de skills de Theus. No requiere instalación adicional cuando el arsenal está instalado.
+
+### Instalación con el arsenal completo
+
+Si trabajas desde el checkout del repositorio del arsenal, verifica que la skill esté presente con:
+
+```bash
+test -f skills/plano-tecnico/SKILL.md
+```
+
+Para actualizar más adelante, revisa el diff antes de actualizar:
+
+```bash
+cd /ruta/al/arsenal
+git fetch origin main
+git log --oneline HEAD..origin/main       # revisa los commits nuevos antes de actualizar
+git checkout <sha-completo-revisado>      # fija un commit específico ya revisado
+```
+
+### Instalación independiente (vendorizada)
+
+Si vendorizas solo esta skill fuera del arsenal completo, copia el archivo revisado desde el repositorio del arsenal a `~/.theus/skills/plano-tecnico/SKILL.md`. Las copias vendorizadas no tienen remote de git, así que actualízalas volviendo a copiar el archivo desde un commit revisado del arsenal en lugar de ejecutar `git pull`.
+
+## Requisitos
+
+- Theus CLI (para invocar la skill `/plano-tecnico`)
+- Git + GitHub CLI (opcional — habilita el flujo completo de rama/PR/CI; el plano técnico detecta su ausencia y cambia automáticamente a modo directo)

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

@@ -0,0 +1,189 @@
+---
+name: presentaciones-html
+description: Crea presentaciones HTML impactantes y ricas en animación, desde cero o convirtiendo archivos de PowerPoint. Úsala cuando el usuario quiera construir una presentación, convertir un PPT/PPTX a web o crear diapositivas para una charla o pitch. Ayuda a quienes no son diseñadores a descubrir su estética mediante exploración visual en lugar de elecciones abstractas.
+---
+
+# Presentaciones HTML
+
+Crea presentaciones HTML sin dependencias, ricas en animación, que corren íntegramente en el navegador.
+
+## Cuándo activarla
+
+- Crear una presentación para una charla, un pitch, un taller o una reunión interna
+- Convertir diapositivas `.ppt` o `.pptx` en una presentación HTML
+- Mejorar el layout, el movimiento o la 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. **Cero dependencias**: por defecto, un único archivo HTML autocontenido con CSS y JS inline.
+2. **El ajuste al viewport es obligatorio**: cada diapositiva debe caber en un viewport sin scroll interno.
+3. **Muestra, no preguntes**: usa previsualizaciones visuales en lugar de cuestionarios de estilo abstractos.
+4. **Diseño distintivo**: evita los decks genéricos de gradiente morado, Inter sobre blanco y aspecto de plantilla.
+5. **Calidad de producción**: mantén el código comentado, accesible, responsivo y con buen rendimiento.
+
+Antes de generar, lee `STYLE_PRESETS.md` para la base CSS segura para viewport, los límites de densidad, el catálogo de presets y los gotchas de CSS.
+
+## Flujo de trabajo
+
+### 1. Detecta el modo
+
+Elige una vía:
+- **Presentación nueva**: 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 quiere mejorarlas
+
+### 2. Descubre el contenido
+
+Pregunta solo lo mínimo necesario:
+- propósito: pitch, enseñanza, charla de conferencia, actualización interna
+- extensión: corta (5-10), media (10-20), larga (20+)
+- estado del contenido: copy terminado, notas sueltas, solo el tema
+
+Si el usuario ya tiene contenido, pídele que lo pegue antes de definir el estilo.
+
+### 3. Descubre el estilo
+
+Por defecto, usa exploración visual.
+
+Si el usuario ya conoce el preset deseado, salta las previsualizaciones y úsalo directamente.
+
+En caso contrario:
+1. Pregunta qué sensación debe generar el deck: impresionar, energizar, enfocar, inspirar.
+2. Genera **3 archivos de previsualización de una sola diapositiva** en `.theus/design/slide-previews/`.
+3. Cada previsualización debe ser autocontenida, mostrar con claridad tipografía/color/movimiento y quedarse por debajo de unas 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 de `STYLE_PRESETS.md` al mapear estado de ánimo a estilo.
+
+### 4. Construye la presentación
+
+Salida:
+- `presentacion.html`
+- `[nombre-presentacion].html`
+
+Usa una carpeta `assets/` solo cuando el deck contenga imágenes extraídas o aportadas por el usuario.
+
+Estructura requerida:
+- secciones de diapositiva semánticas
+- una base CSS segura para viewport tomada de `STYLE_PRESETS.md`
+- propiedades personalizadas de CSS para los valores del tema
+- una clase controladora de la presentación para navegación por teclado, rueda del ratón y táctil
+- Intersection Observer para las animaciones de aparición
+- soporte de movimiento reducido
+
+### 5. Fuerza el ajuste al viewport
+
+Trátalo como una barrera dura.
+
+Reglas:
+- cada `.slide` debe usar `height: 100vh; height: 100dvh; overflow: hidden;`
+- toda la tipografía y espaciado deben escalar con `clamp()`
+- cuando el contenido no cabe, divídelo en más diapositivas
+- nunca resuelvas el desborde encogiendo el texto por debajo de tamaños legibles
+- nunca permitas scrollbars dentro de una diapositiva
+
+Usa los límites de densidad y el bloque CSS obligatorio de `STYLE_PRESETS.md`.
+
+### 6. Valida
+
+Comprueba el deck terminado en estos tamaños:
+- 1920x1080
+- 1280x720
+- 768x1024
+- 375x667
+- 667x375
+
+Si hay automatización de navegador disponible, úsala para verificar que ninguna diapositiva desborda y que la navegación por teclado funciona.
+
+### 7. Entrega
+
+En la entrega:
+- elimina los archivos de previsualización temporales, salvo que el usuario quiera conservarlos
+- abre el deck con el visor apropiado de 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 comando de apertura correcto para el SO actual:
+- macOS: `open archivo.html`
+- Linux: `xdg-open archivo.html`
+- Windows: `start "" archivo.html`
+
+## Conversión de PPT / PPTX
+
+Para convertir PowerPoint:
+1. Prefiere `python3` con `python-pptx` para extraer texto, imágenes y notas (ver `scripts/extract-pptx.py`).
+2. Si `python-pptx` no está disponible, pregunta si instalarlo o recurrir a un flujo manual/basado en exportación.
+3. Preserva el orden de diapositivas, las notas del orador y los assets extraídos.
+4. Tras la extracción, ejecuta el mismo flujo de selección de estilo que en una presentación nueva.
+
+Mantén la conversión multiplataforma. No dependas de herramientas exclusivas de macOS cuando Python puede hacer el trabajo.
+
+## Exportación a PDF
+
+Para generar un PDF estático del deck (email, impresión, documentos):
+
+```bash
+bash "${THEUS_PLUGIN_ROOT}/skills/presentaciones-html/scripts/export-pdf.sh" ./presentacion.html
+```
+
+## Requisitos de implementación
+
+### HTML / CSS
+
+- Usa CSS y JS inline salvo que el usuario pida explícitamente un proyecto multiarchivo.
+- 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, retículas, ruido y geometría en lugar de ilustraciones.
+
+### JavaScript
+
+Incluye:
+- navegación por teclado
+- navegación táctil / por deslizamiento
+- navegación por rueda del ratón
+- indicador de progreso o índice de diapositivas
+- disparadores de animación de aparición al entrar en pantalla
+
+### Accesibilidad
+
+- usa estructura semántica (`main`, `section`, `nav`)
+- mantén un contraste legible
+- soporta navegación solo por teclado
+- respeta `prefers-reduced-motion`
+
+## Límites de densidad de contenido
+
+Usa estos máximos salvo 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 genéricos de startup sin identidad visual
+- decks con fuentes del sistema salvo que sean intencionalmente editoriales
+- muros de viñetas interminables
+- bloques de código que necesitan scroll
+- cajas de contenido de altura fija que se rompen en pantallas bajas
+- funciones CSS negadas inválidas como `-clamp(...)`
+
+## Skills relacionadas
+
+- `patrones-frontend` para patrones de componentes e interacción alrededor del deck
+- `diseno-liquid-glass` cuando la presentación adopta intencionalmente la estética de vidrio de Apple
+- `testing-e2e` si necesitas verificación automatizada del deck final en el navegador
+
+## Checklist de entrega
+
+- la presentación corre desde un archivo local en un navegador
+- cada diapositiva cabe en el viewport sin scroll
+- el estilo es distintivo e intencional
+- la animación tiene sentido, no es ruido
+- se respeta el movimiento reducido
+- las rutas de archivo y los puntos de personalización se explican en la entrega

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

@@ -0,0 +1,330 @@
+# Referencia de presets de estilo
+
+Estilos visuales curados para `presentaciones-html`.
+
+Usa este archivo para:
+- la base CSS obligatoria de ajuste al viewport
+- la selección de presets y el mapeo de estados de ánimo
+- gotchas de CSS y reglas de validación
+
+Solo formas abstractas. Evita ilustraciones salvo que el usuario las pida explícitamente.
+
+## El ajuste al viewport es innegociable
+
+Cada diapositiva debe caber completa en un viewport.
+
+### Regla de oro
+
+```text
+Cada diapositiva = exactamente una altura de viewport.
+Demasiado contenido = dividir en más diapositivas.
+Nunca hacer scroll dentro de una diapositiva.
+```
+
+### Límites de densidad
+
+| Tipo de diapositiva | Contenido máximo |
+|---------------------|------------------|
+| Diapositiva de título | 1 encabezado + 1 subtítulo + tagline opcional |
+| Diapositiva de contenido | 1 encabezado + 4-6 viñetas o 2 párrafos |
+| Cuadrícula de características | 6 tarjetas máximo |
+| Diapositiva de código | 8-10 líneas máximo |
+| Diapositiva de cita | 1 cita + atribución |
+| Diapositiva de imagen | 1 imagen, idealmente por debajo de 60vh |
+
+## CSS base obligatorio
+
+Copia este bloque en cada presentación generada y aplica el tema encima.
+
+```css
+/* ===========================================
+   AJUSTE AL VIEWPORT: ESTILOS BASE OBLIGATORIOS
+   =========================================== */
+
+html, body {
+    height: 100%;
+    overflow-x: hidden;
+}
+
+html {
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+}
+
+.slide {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    overflow: hidden;
+    scroll-snap-align: start;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.slide-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-height: 100%;
+    overflow: hidden;
+    padding: var(--slide-padding);
+}
+
+:root {
+    --title-size: clamp(1.5rem, 5vw, 4rem);
+    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
+    --h3-size: clamp(1rem, 2.5vw, 1.75rem);
+    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
+    --small-size: clamp(0.65rem, 1vw, 0.875rem);
+
+    --slide-padding: clamp(1rem, 4vw, 4rem);
+    --content-gap: clamp(0.5rem, 2vw, 2rem);
+    --element-gap: clamp(0.25rem, 1vw, 1rem);
+}
+
+.card, .container, .content-box {
+    max-width: min(90vw, 1000px);
+    max-height: min(80vh, 700px);
+}
+
+.feature-list, .bullet-list {
+    gap: clamp(0.4rem, 1vh, 1rem);
+}
+
+.feature-list li, .bullet-list li {
+    font-size: var(--body-size);
+    line-height: 1.4;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
+    gap: clamp(0.5rem, 1.5vw, 1rem);
+}
+
+img, .image-container {
+    max-width: 100%;
+    max-height: min(50vh, 400px);
+    object-fit: contain;
+}
+
+@media (max-height: 700px) {
+    :root {
+        --slide-padding: clamp(0.75rem, 3vw, 2rem);
+        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
+        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
+        --h2-size: clamp(1rem, 3vw, 1.75rem);
+    }
+}
+
+@media (max-height: 600px) {
+    :root {
+        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
+        --content-gap: clamp(0.3rem, 1vw, 0.75rem);
+        --title-size: clamp(1.1rem, 4vw, 2rem);
+        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
+    }
+
+    .nav-dots, .keyboard-hint, .decorative {
+        display: none;
+    }
+}
+
+@media (max-height: 500px) {
+    :root {
+        --slide-padding: clamp(0.4rem, 2vw, 1rem);
+        --title-size: clamp(1rem, 3.5vw, 1.5rem);
+        --h2-size: clamp(0.9rem, 2.5vw, 1.25rem);
+        --body-size: clamp(0.65rem, 1vw, 0.85rem);
+    }
+}
+
+@media (max-width: 600px) {
+    :root {
+        --title-size: clamp(1.25rem, 7vw, 2.5rem);
+    }
+
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.2s !important;
+    }
+
+    html {
+        scroll-behavior: auto;
+    }
+}
+```
+
+## Checklist de viewport
+
+- cada `.slide` tiene `height: 100vh`, `height: 100dvh` y `overflow: hidden`
+- toda la tipografía usa `clamp()`
+- todo el espaciado usa `clamp()` o unidades de viewport
+- las imágenes tienen restricciones de `max-height`
+- las cuadrículas se adaptan con `auto-fit` + `minmax()`
+- existen breakpoints de altura corta en `700px`, `600px` y `500px`
+- si algo se siente apretado, divide la diapositiva
+
+## Mapeo de estado de ánimo a preset
+
+| Estado de ánimo | Presets adecuados |
+|-----------------|-------------------|
+| Impresionar / Confianza | Bold Signal, Electric Studio, Dark Botanical |
+| Emoción / Energía | Creative Voltage, Neon Cyber, Split Pastel |
+| Calma / Enfoque | Notebook Tabs, Paper & Ink, Swiss Modern |
+| Inspiración / Emotividad | Dark Botanical, Vintage Editorial, Pastel Geometry |
+
+## Catálogo de presets
+
+### 1. Bold Signal
+
+- Carácter: seguro, de alto impacto, listo para keynote
+- Ideal para: pitch decks, lanzamientos, declaraciones
+- Fuentes: Archivo Black + Space Grotesk
+- Paleta: base carbón, tarjeta focal naranja intenso, texto blanco nítido
+- Firma: números de sección sobredimensionados, tarjeta de alto contraste sobre campo oscuro
+
+### 2. Electric Studio
+
+- Carácter: limpio, contundente, con acabado de agencia
+- Ideal para: presentaciones a clientes, revisiones estratégicas
+- Fuentes: solo Manrope
+- Paleta: negro, blanco, acento cobalto saturado
+- Firma: división en dos paneles y alineación editorial precisa
+
+### 3. Creative Voltage
+
+- Carácter: energético, retro-moderno, confianza lúdica
+- Ideal para: estudios creativos, trabajo de marca, storytelling de producto
+- Fuentes: Syne + Space Mono
+- Paleta: azul eléctrico, amarillo neón, azul marino profundo
+- Firma: texturas de semitono, insignias, contraste potente
+
+### 4. Dark Botanical
+
+- Carácter: elegante, premium, atmosférico
+- Ideal para: marcas de lujo, narrativas reflexivas, decks de producto premium
+- Fuentes: Cormorant + IBM Plex Sans
+- Paleta: casi negro, marfil cálido, rosa pálido, dorado, terracota
+- Firma: círculos abstractos desenfocados, filetes finos, movimiento contenido
+
+### 5. Notebook Tabs
+
+- Carácter: editorial, organizado, táctil
+- Ideal para: informes, revisiones, narrativas estructuradas
+- Fuentes: Bodoni Moda + DM Sans
+- Paleta: papel crema sobre carbón con pestañas pastel
+- Firma: hoja de papel, pestañas laterales de color, detalles de encuadernación
+
+### 6. Pastel Geometry
+
+- Carácter: cercano, moderno, amigable
+- Ideal para: overviews de producto, onboarding, decks de marca más ligeros
+- Fuentes: solo Plus Jakarta Sans
+- Paleta: campo azul pálido, tarjeta crema, acentos suaves rosa/menta/lavanda
+- Firma: píldoras verticales, tarjetas redondeadas, sombras suaves
+
+### 7. Split Pastel
+
+- Carácter: lúdico, moderno, creativo
+- Ideal para: presentaciones de agencia, talleres, portafolios
+- Fuentes: solo Outfit
+- Paleta: melocotón + lavanda dividido con insignias menta
+- Firma: fondo dividido, etiquetas redondeadas, retículas superpuestas ligeras
+
+### 8. Vintage Editorial
+
+- Carácter: ingenioso, con personalidad, inspirado en revistas
+- Ideal para: marcas personales, charlas con opinión, storytelling
+- Fuentes: Fraunces + Work Sans
+- Paleta: crema, carbón, acentos cálidos apagados
+- Firma: acentos geométricos, llamadas con borde, titulares serif contundentes
+
+### 9. Neon Cyber
+
+- Carácter: futurista, tecnológico, cinético
+- Ideal para: IA, infraestructura, herramientas de desarrollo, charlas de "el futuro de X"
+- Fuentes: Clash Display + Satoshi
+- Paleta: azul marino medianoche, cian, magenta
+- Firma: brillos, partículas, retículas, energía de radar de datos
+
+### 10. Terminal Green
+
+- Carácter: orientado a desarrolladores, hacker-limpio
+- Ideal para: APIs, herramientas CLI, demos de ingeniería
+- Fuentes: solo JetBrains Mono
+- Paleta: oscuro tipo editor + verde terminal
+- Firma: líneas de escaneo, encuadre de línea de comandos, ritmo monoespaciado preciso
+
+### 11. Swiss Modern
+
+- Carácter: minimal, preciso, orientado a datos
+- Ideal para: entornos corporativos, estrategia de producto, analítica
+- Fuentes: Archivo + Nunito
+- Paleta: blanco, negro, rojo señal
+- Firma: retículas visibles, asimetría, disciplina geométrica
+
+### 12. Paper & Ink
+
+- Carácter: literario, reflexivo, narrativo
+- Ideal para: ensayos, narrativas de keynote, decks manifiesto
+- Fuentes: Cormorant Garamond + Source Serif 4
+- Paleta: crema cálido, carbón, acento carmesí
+- Firma: citas destacadas, letras capitales, filetes elegantes
+
+## Selección directa
+
+Si el usuario ya sabe el estilo que quiere, deja que elija directamente entre los nombres de preset anteriores en lugar de forzar la generación de previsualizaciones.
+
+## Mapeo de sensación de animación
+
+| Sensación | Dirección del movimiento |
+|-----------|--------------------------|
+| Dramático / Cinematográfico | fundidos lentos, parallax, escalados grandes |
+| Tecnológico / Futurista | brillos, partículas, movimiento de retícula, texto scramble |
+| Lúdico / Amigable | easing elástico, formas redondeadas, movimiento flotante |
+| Profesional / Corporativo | transiciones sutiles de 200-300 ms, diapositivas limpias |
+| Calmado / Minimal | movimiento muy contenido, espacio en blanco primero |
+| Editorial / Revista | jerarquía fuerte, interacción escalonada de texto e imagen |
+
+## Gotcha de CSS: negar funciones
+
+Nunca escribas esto:
+
+```css
+right: -clamp(28px, 3.5vw, 44px);
+margin-left: -min(10vw, 100px);
+```
+
+Los navegadores lo ignoran silenciosamente.
+
+Escribe siempre esto:
+
+```css
+right: calc(-1 * clamp(28px, 3.5vw, 44px));
+margin-left: calc(-1 * min(10vw, 100px));
+```
+
+## Tamaños de validación
+
+Prueba como mínimo:
+- Escritorio: `1920x1080`, `1440x900`, `1280x720`
+- Tablet: `1024x768`, `768x1024`
+- Móvil: `375x667`, `414x896`
+- Móvil apaisado: `667x375`, `896x414`
+
+## Antipatrones
+
+No uses:
+- plantillas de startup morado sobre blanco
+- Inter / Roboto / Arial como voz visual, salvo que el usuario quiera explícitamente neutralidad utilitaria
+- muros de viñetas, tipografía diminuta o bloques de código que requieran scroll
+- ilustraciones decorativas cuando la geometría abstracta haría mejor el trabajo