Instagram Carousel

Genera carousels para Instagram desde un tema. Renderiza PNG de 1080×1350 con Open Carrusel y 6 templates HTML incluidos. Deja los PNG y el caption en una carpeta local.

Requisitos

• Open Carrusel clonado e instalado (npm install) en open_carrusel_dir.
• Python 3.10+.
• config.json en la raíz del skill (copiar de config.example.json). Ver README.

El contrato de dos pasos

Este skill trabaja SIEMPRE en dos pasos, en respuestas distintas.

Paso 1: proponer el contenido slide por slide en texto. Esperar aprobación. Paso 2: solo tras aprobación explícita, generar los PNG.

Motivo: editar PNG cuesta un ciclo completo. Editar texto cuesta segundos.

• "OK" / "dale" / "perfecto" / "adelante" → arrancar Paso 2.
• "cambiá X" → repetir Paso 1 con el ajuste. Esperar OK de nuevo.
• Si el usuario pide saltar el Paso 1: explicar el motivo en una línea y proponer una versión corta (3–5 slides). Saltar solo si insiste.

Paso 1 — Propuesta en texto

1.1 Detectar el formato

Si es ambiguo, preguntar antes de proponer.

1.2 Elegir el template

Si proponés la alternativa, justificar en una línea. Detalle de cada template: references/templates.md.

1.3 Chrome del template

Cada template trae tres elementos de "chrome": top label (pill arriba), handle en el footer, paginación ("2 / 5").

Declarar el chrome en la propuesta: Chrome: completo / Chrome: limpio / Chrome: parcial — solo X. Si el usuario no dijo nada, elegir el default de la tabla y mencionarlo.

1.4 Escribir el contenido

Voz. Si el usuario tiene un skill o guía de voz propia (ej. write-like-<nombre>), aplicarla. Si no, seguir references/writing.md.

Reglas mínimas, siempre:

• 5 a 10 slides. Sin relleno, sin recorte.
• Un punto por slide. Un headline corto + un subhead de una línea.
• Integridad factual. No inventar stats, fechas, anécdotas ni capacidades de productos. Marcar lo dudoso con [VERIFICAR: ...] para que el usuario lo corrija antes de aprobar.
• Sin emojis en los slides. Sin ALL CAPS (salvo una palabra puntual).
• Cierre que frena, no que despide. Nada de "Pruébalo hoy" / "Gracias por leer". Ver patrones en references/writing.md.

1.5 Estructura típica

1.6 Caption

1–3 líneas que extiendan el carousel sin repetirlo. Puede cerrar con una pregunta. Hashtags: solo si el usuario los usa. Si no lo aclaró, preguntar una vez y recordar la respuesta en la sesión.

1.7 Formato de salida del Paso 1

**Carousel propuesto:** "<título corto, 4–7 palabras>"

**Formato:** <noticia | tip | reflexión>
**Template:** <nombre> · <razón en 1 línea si no es default>
**Chrome:** <completo | limpio | parcial — X>
**Slides:** <N>

---

**Slide 1 — Portada**
<contenido literal>

**Slide 2 — <2-3 palabras>**
<contenido literal>

...

---

**Caption:**
<caption>

---

¿OK así? Decime si querés cambios o si genero los PNG.

Si hay [VERIFICAR: ...], listarlos arriba de todo.

Paso 2 — Ejecución (solo tras OK explícito)

2.1 Verificar el server

bash <skill_dir>/scripts/ensure_server.sh

Sale 0 si Open Carrusel responde. Si no, lo levanta y espera hasta 90 s. Si falla, abortar y reportar el error literal.

2.2 Construir el HTML de cada slide

1. Abrir templates/<template_tag>.html.
2. Copiar el bloque <style id="slide-css">...</style> completo, sin modificar. Ese es el style del spec. NO copiar el bloque preview-only: sirve solo para ver el archivo en el navegador.
3. Para cada slide aprobado: copiar el <article class="slide"> de ejemplo que más se parezca (portada / contenido / cierre). Mantener el esqueleto. Reemplazar solo el texto.
4. Usar las clases CSS existentes. No inventar clases nuevas.
5. Dejar {{HANDLE}} y {{SIGNATURE}} como están: el script los reemplaza con config.json.
6. Chrome limpio: borrar <div class="top"> / .top-bar y <div class="footer"> del article.
7. Ajustar la paginación al total real de slides ("2 / 7", no "2 / 5").

No incluir <!DOCTYPE>, <html>, <head> ni <link> de fuentes. Open Carrusel los agrega y carga las Google Fonts que detecta en el <style>.

2.3 Construir el spec

Guardar en un archivo temporal (ej. /tmp/carousel-spec.json):

{
  "title": "Llegó Nimbus 2.0",
  "format": "noticia",
  "template_tag": "card-pop",
  "caption": "...",
  "hashtags": [],
  "style": "<style>...</style>",
  "slides": [
    {"body": "<article class=\"slide\">...</article>", "notes": "portada"},
    {"body": "<article class=\"slide\">...</article>", "notes": "resumen"}
  ]
}

Ejemplo completo: examples/spec.example.json.

2.4 Renderizar

python3 <skill_dir>/scripts/publish_carousel.py /tmp/carousel-spec.json

El script:

1. Lee config.json (handle, firma, colores, fuente, carpeta de salida).
2. Reemplaza placeholders e inyecta los colores de marca como variables CSS.
3. Crea el carousel en Open Carrusel y agrega cada slide.
4. Exporta el ZIP y lo descomprime en output_dir/<slug>/.
5. Guarda caption.txt en la misma carpeta.
6. Ejecuta after_export si está configurado.
7. Imprime LOCAL_FOLDER, CAROUSEL_ID, TITLE_SLUG, SLIDE_COUNT, TOTAL_KB.

Si falla, leer stderr y reportar el error literal.

2.5 Reportar

Listo, "<título>" generado.

📁 Carpeta: <LOCAL_FOLDER>
🖼️ <N> slides PNG (1080×1350), <TOTAL_KB> KB
📝 caption.txt incluido

Edge cases

• Regenerar tras feedback: correr publish_carousel.py --overwrite para escribir en la misma carpeta. Sin el flag, el script crea <slug>-v2.
• Variantes para comparar: generar con títulos distintos ("<tema> — azul", "<tema> — naranja"). Agruparlas en una carpeta madre con el nombre canónico.
• Open Carrusel no levanta: verificar que open_carrusel_dir existe y tiene node_modules. No instalar automáticamente. Avisar al usuario.
• Export devuelve HTTP 500: un slide tiene HTML inválido. Leer el mensaje, regenerar ese slide, reintentar.
• template_tag inválido: el script lista los 6 válidos. Corregir y reintentar.
• Soft Poetic con texto largo: no funciona. Cambiar a Diary.

Archivos de referencia

• references/templates.md — paleta, componentes CSS y estructura de cada template. Leer antes de escribir HTML.
• references/writing.md — patrones de escritura para carousels: subheads, quotes, warnings, cierres.
• templates/ — los 6 templates HTML con 5 slides de ejemplo cada uno. Abrir en el navegador para verlos.

Lo que NO hace este skill

• No publica en Instagram. Deja los PNG listos para subir.
• No genera videos ni reels.
• No edita PNG ya generados. Regenera el carousel completo.