--- name: carrusel-gnb description: "Genera slides visuales para redes con marca GNB. Cuatro tipos: carousel (LinkedIn, swipeable HTML + descarga PNG), quote, podcast, tweet-pic. Cuando corre dentro de /contenido-diario salta las preguntas y usa el guión del día como brief. Activar cuando el usuario diga: 'slide', 'carrusel', 'post visual', 'stories', 'quote', 'tweet pic', 'frase', 'podcast slide', 'thumbnail', 'contenido visual'." triggers: ["slide", "carrusel", "post visual", "stories", "quote", "tweet pic", "podcast slide", "linkedin carousel"] extends: [voz-gnb] related: [escucha, newsletter-gnb, contenido-diario, linkedin-historia-gnb, maa-contenido] --- # 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`](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`](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: ` 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`](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`](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): ```bash 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: `_1080x1080.png`, `_1920x1080.png`, `_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. - `escucha` — fuente de hooks virales. - `newsletter-gnb` — los carousels suelen reutilizar piezas del newsletter.