carrusel-gnb — Slides visuales con marca GNB

Genera slides para redes con la voz e identidad de Gabriel Neuman / GNB Labs.

Cuatro tipos:

• carousel — LinkedIn swipeable, HTML interactivo + descarga PNG (ver references/)
• quote — Frase con autor, PNG vía script Python
• podcast — Frase destacada de episodio, PNG vía script Python
• tweet-pic — Copy corto visual, PNG vía script Python

Material extendido (cargar a demanda):

• references/sistema-visual.md — paleta, tipografía, formato del slide, componentes (eyebrow, badge, stat, fila numerada, comparación, pull quote, CTA), decorativos obligatorios, secuencia estándar, reglas de layout.
• references/frame-linkedin.md — frame HTML estilo LinkedIn, swipe JS, panel de descarga html2canvas, errores comunes de export.

⚠️ REGLA CRÍTICA — SIEMPRE PREGUNTAR PRIMERO (con UNA excepción)

Para carousel: nunca generar HTML sin antes pasar por el Step 1. Aunque el usuario diga "hazme un carousel sobre X", tu única respuesta es hacer las preguntas de onboarding. Sin defaults silenciosos.

Excepción única — modo dentro de /contenido-diario: cuando este skill es invocado como Paso 3c del orquestador, NO preguntar. El orquestador ya pasa:

• Tema y hook: del guión del video del día (guion-video-gnb output).
• Sub-tipo: carousel (LinkedIn swipeable).
• Story Lock: SESSION STORY LOCK: <título> si existe — se usa como anclaje opcional en slide 2 o 3 ("Una vez me pasó algo así: ...") para mantener coherencia con el LinkedIn historia del mismo día.
• Vibe: default formal salvo que el guión tenga tono distinto explícito.
• CTA: el mismo del guión del día.

En este modo: extraer 5-7 insights discretos del guión, mapearlos al sistema de slides de references/sistema-visual.md, generar HTML + render PNG. Reportar al orquestador la ruta del HTML y del PNG.

Para quote, podcast, tweet-pic: preguntar tipo si no está claro, luego ejecutar directamente.

No-negociables (todos los tipos)

1. Voz pasada por voz-gnb antes de entrar al render. Todo texto visible es copy — aplica MX y ban list.
2. Watermark gnb.mx siempre presente. Color #b86f4a, peso 600.
3. Sin emojis en los slides (override estricto por estética).
4. Foto circular con tamaño fijo en píxeles. Nunca clamp() ni %.
5. Sin @handle, sin hashtags, sin frameworks CSS externos.
6. Tipografía base GNB: Georgia / DejaVu Serif (para quote/podcast/tweet-pic). Para carousel: aplicar sistema de vibes (ver references/sistema-visual.md).

TIPO: carousel

Step 1 — Preguntar antes de generar

Antes de escribir una línea de HTML, hacer todas estas preguntas en un solo mensaje:

"Antes de armar el carousel, necesito algunos datos:

1. ¿Sobre qué es el carousel? (tema, ángulo o argumento que quieres comunicar)
2. ¿A quién va dirigido? (ej: founders, marketers, freelancers — calibra tono y vocabulario)
3. ¿Cuántos slides? — Puntual (6–8), estándar (9–12), profundo (13–16). Default: 10.
4. Tono — Analítico / Táctico / Bold y provocador / Conversacional / Storytelling / Minimal
5. Vibe tipográfico — Editorial (serif + sans) / Técnico y preciso / Cálido / Bold expresivo / Clean moderno
6. ¿Tienes logo SVG o usamos las iniciales GN?
7. Call to action del último slide — ¿Qué debe hacer el lector? (Seguir / Guardar el post / Escríbeme / Comentar / Link en bio)"

Esperar respuestas. Mínimo requerido: tema + tono. Si algo queda en blanco, declarar el default explícitamente antes de generar.

Step 2 — Diseñar el carousel

Con las respuestas, cargar references/sistema-visual.md y aplicar:

• Paleta y tipografía según vibe elegido.
• Secuencia estándar (Cover → Problema → Argumento → Contenido → Resumen → CTA).
• Componentes apropiados por slide (stat callout, fila numerada, comparación antes/después, etc.).
• Decorativos obligatorios por slide (sin fondos planos).

Step 3 — Envolver en frame LinkedIn

Cargar references/frame-linkedin.md y aplicar:

• Frame de 540px con header + viewport swipeable + dots + pager.
• JavaScript de swipe que actualiza dots y pager.
• Panel de descarga al final (html2canvas, PNGs 1080×1080).

Step 4 — Ofrecer caption

Después de generar el carousel, ofrecer escribir la caption del post. El carousel y la caption son una unidad — no entregar uno sin el otro.

TIPOS: quote / podcast / tweet-pic (script Python)

Inputs requeridos

• Tipo: quote | podcast | tweet-pic
• Texto principal
• Para quote: autor
• Para podcast: nombre del podcast

Proceso

1. Cargar VOICE GATE de voz-gnb.
2. Pasar todo el texto por VOICE GATE. Argentinismos = bloqueo.
3. Ejecutar scripts/generate_slides.py (no leer como referencia):

python3 scripts/generate_slides.py \
  --type {quote|podcast|tweet-pic} \
  --text "..." \
  --author "..."           # solo quote
  --podcast-name "..."     # solo podcast
  --photo public/gabriel.jpg \
  --name "Gabriel Neuman" \
  --slug mi-post \
  --out content/social/

Salida: <slug>_1080x1080.png, <slug>_1920x1080.png, <slug>_1080x1920.png

Paleta y tipografía (quote/podcast/tweet-pic)

Georgia / DejaVu Serif
--beige:  #f5f3f0
--dark:   #2a2a2a
--accent: #b86f4a

Destino de archivos

• quote, podcast, tweet-pic → content/social/
• carousel → HTML en content/social/carruseles/

Quality gate

• VOICE GATE de voz-gnb corrido y pasado sobre todos los textos
• Watermark gnb.mx visible en cada slide
• Para carousel: frame LinkedIn completo con dots funcionales
• Para carousel: panel de descarga incluido
• Para carousel: al menos 1 elemento decorativo por slide
• Para carousel: Caption ofrecida después de aprobar el diseño
• Para quote/podcast/tweet-pic: foto circular sin deformación
• CTA con link real (no placeholder) si aplica

Banned patterns

• Emojis en slides
• Hooks con preguntas-cebo ("¿te ha pasado?", "¿sabías que…?")
• Más de 16 slides en un carousel
• Body de más de 3 oraciones por slide
• @handle, hashtags, frameworks CSS externos
• Backgrounds planos sin elementos decorativos (carousel)

Scripts y archivos

• scripts/generate_slides.py — ejecutar vía bash, no leer.
• references/sistema-visual.md — leer como referencia cuando renderizar carousel.
• references/frame-linkedin.md — leer como referencia para envoltura interactiva.
• templates/template-final.html — base HTML para carousel.

Skills relacionados

• voz-gnb — pasar ANTES de renderizar.
• observatorio-creadores — fuente de hooks virales.
• newsletter-gnb — los carousels suelen reutilizar piezas del newsletter.