GraySilver/explainloop

¿Qué hace explainloop?

Crea animaciones originales y legibles que expliquen una afirmación, secuencia, comparación o cambio en el texto proporcionado. Preserva el estado factual de la fuente y la sección, cantidad, estilo, tamaño y destino elegidos por el usuario. La referencia visual es un vocabulario de diseño, no una plantilla para copiar escena por escena.

Entradas y selección

1. Lee el texto completo proporcionado. Para una URL, usa las herramientas de navegación disponibles; si no se puede recuperar el cuerpo, solicita el texto. Para Markdown/TXT local, lee el archivo y los pies de foto adyacentes; scripts/outline.mjs --input /ruta/absoluta/articulo.md [--section "Título"] informa los intervalos de títulos, el recuento de caracteres y si es útil un esquema interno ampliado. No infieras el contenido del artículo a partir de su título.
2. Si el usuario nombra un título, párrafo, cita o rango, selecciona solo ese pasaje para los temas del GIF; usa el texto circundante solo para resolver el contexto. De lo contrario, identifica hasta tres relaciones distintas que merezcan ser animadas. Prefiere un evento observable, antes/después, causa/efecto, comparación o cambio numérico sobre un eslogan. Produce de 1 a 3 GIFs; no llenes la cantidad con temas débiles.
3. Construye un mapa de evidencia compacto para cada GIF: pasaje fuente exacto o ubicación del párrafo, estado de la afirmación (hecho, medición, resultado reportado, propuesta u opinión), objeto focal, qué cambia visiblemente y una conclusión de una oración. Conserva unidades y calificadores. Elige un GIF solo cuando ese cambio enseñe algo que un fotograma estático dejaría poco claro. No fabriques datos, UI de productos, citas ni resultados. Las versiones de múltiples relaciones de aspecto de un mismo tema deben preservar este mapa.
4. Cuando el cuerpo seleccionado exceda los 6000 caracteres después de eliminar el marcado o tenga más de cinco secciones de nivel superior, haz un esquema de tema interno ampliado antes de elegir los 1 a 3 GIFs más sólidos. Continúa automáticamente; pregunta solo cuando el pasaje solicitado o una afirmación material permanezca ambigua después de leer la fuente. Una sección específica seleccionada se mide por sí misma.

Lee content-planning.md al seleccionar temas o manejar incertidumbre. Esta habilidad no requiere un guion completo de video narrado ni aprobación de locución.

Decisiones visuales

• Lee scene-recipes.md y visual-quality.md antes de componer una escena. Establece la relación admitida, el objeto focal, el orden de lectura, la jerarquía tipográfica, los estados de los widgets y los compases de movimiento. Diseña primero el fotograma de resultado completo, luego haz que el movimiento anterior conduzca a él. Para una escena nueva, compara internamente dos composiciones de miniatura materialmente diferentes, luego elige la que explique la fuente con menos detalle competitivo. Lee design-directions.md al seleccionar una familia visual específica del tema, y backgrounds.md al seleccionar el tratamiento del lienzo. Un preajuste de estilo proporciona tokens; la escena aún necesita un diseño original. No coloques cada tema dentro de la misma disposición encabezado/cuerpo/pie de página de kit.page.
• Comienza con las instrucciones visuales del usuario. Para una solicitud que produce múltiples GIFs o relaciones de aspecto, elige un estilo de lote antes de escribir escenas: un solo preajuste de styles.md y fondo compartido, paleta, roles de fuente, tratamiento de línea/radio y carácter de movimiento. Cada escena de ese lote usa el mismo meta.style y styleOverrides compartidos; varía la composición y los objetos semánticos para explicar cada tema. No elijas un nuevo preajuste para cada GIF. Usa estilos mixtos solo cuando el usuario lo solicite explícitamente.
• Cuando la tipografía sea la carga de la escena, lee font-catalog.md. Compara dos pares de fuentes instaladas con respecto al pasaje y registra los roles elegidos en la escena. Verifica la cara CJK real resuelta y los glifos antes de renderizar; no sustituyas silenciosamente una fuente de visualización faltante. El catálogo también enumera fuentes abiertas instaladas independientemente y opcionales. La habilidad no descarga ni empaqueta fuentes.
• Compón objetos concretos usando components.md: personas, mensajes, documentos, tareas, líneas de tiempo, mediciones y sus relaciones. Usa los widgets más ricos de correo electrónico, calendario o mensajes cuando la explicación necesite detalle de UI; no inventes la interfaz de un producto real. Usa el subconjunto Lucide empaquetado para íconos pequeños familiares. Consulta sources-and-licenses.md antes de agregar cualquier obra externa.
• Por defecto, usa objetos vectoriales originales. Usa imágenes proporcionadas, una ilustración con licencia adecuada o mapa de bits generado solo cuando un tema concreto no pueda explicarse claramente con componentes vectoriales. Mantén las imágenes coherentes con el estilo seleccionado y registra su fuente. No sustituyas silenciosamente un ícono genérico por un tema real específico.
• Cada acción visible debe responder qué cambió, a dónde fue un objeto o cómo sigue el resultado. Revela partes relacionadas a partir de un progreso de movimiento cuando se muevan como unidad; deja que la información importante se asiente en un orden deliberado e invierte ese orden al salir. Elige uno de los diez tratamientos de lienzo en backgrounds.md solo después de reservar un área clara para el objeto focal y el texto; ajusta su geometría a la relación del artículo y usa las condiciones de rechazo del catálogo. Mantén el texto legible al ancho del artículo. No muestres valores de gráficos sin datos de origen. Evita pausas estáticas largas y un salto abrupto del primer/último fotograma cuando hagan que el bucle se sienta roto. Consulta failure-cases.md al revisar un defecto similar.

Código fuente de la escena y renderizado

El entregable predeterminado es un GIF silencioso de 1600×900, 16:9, 30 fps, 4–7 segundos. Las preferencias del usuario anulan estos valores predeterminados. Otros perfiles de salida integrados son 4:3 a 1200×900, 1:1 a 1200×1200 y 9:16 a 900×1600; también acepta un tamaño de píxel personalizado. Genera solo las relaciones solicitadas; si no se indica ninguna, usa 16:9. No reduzcas silenciosamente la resolución o los fps para disminuir el tamaño del archivo.

Escribe un archivo .scene.mjs que exporte meta y draw(t, kit); meta.width/height son el lienzo de diseño lógico, mientras que --output-size establece los píxeles rasterizados. draw recibe segundos transcurridos y devuelve un SVG completo de kit.page(...) o kit.svg(...). Coloca el mapa de evidencia en meta.sourceRefs. La fuente debe ser determinista: misma escena y tiempo, mismo SVG. Consulta scene-format.md, assets/examples/message-filter.scene.mjs y assets/examples/multi-ratio/.

Para múltiples relaciones en una solicitud, crea una escena editable separada para cada relación y renderiza cada versión solicitada. Recompón el diseño para espacio cuadrado o vertical; nunca estires, recortes ni agregues barras a una escena apaisada como resultado final. La copia en pantalla puede acortarse para el marco más estrecho, manteniendo la misma evidencia, números, estado de la afirmación y conclusión. Mantén la secuencia causal de la animación coherente entre versiones.

A menos que el usuario elija otro destino, guarda <slug-del-artículo>-01.gif y <slug-del-artículo>-01.scene.mjs (y números de tema consecutivos) en generate/images/ bajo el directorio de trabajo actual para una salida única 16:9. Para una solicitud de múltiples relaciones, añade -16x9, -4x3, -1x1 o -9x16 antes de ambas extensiones; usa -ANCHOxALTO para una relación personalizada. Mantén los fotogramas de trabajo en un directorio temporal. El código fuente de la escena es el entregable editable; no dejes fotogramas PNG generados junto a él.

Resuelve el directorio de esta habilidad como SKILL_ROOT desde la ruta de la habilidad cargada.

Para un lote de dos o más escenas, primero ejecuta node "$SKILL_ROOT/scripts/check-batch.mjs" --scene /ruta/absoluta/primera.scene.mjs --scene /ruta/absoluta/segunda.scene.mjs (repite --scene para cada escena). Corrige cualquier discrepancia de preajuste o token compartido antes de renderizar. Esto verifica los metadatos de la escena. Cuando la percepción de imágenes esté disponible, ejecuta scripts/preview-batch.mjs con los mismos argumentos --scene y compara los fotogramas de resultado reales en cuanto a colores locales de la escena, fuentes, detalles de widgets y tratamiento de fondo. Omite la verificación de estilo de lote solo cuando el usuario haya solicitado explícitamente estilos mixtos.

Renderiza e inspecciona cada GIF solicitado:

node "$SKILL_ROOT/scripts/render.mjs" --scene /ruta/absoluta/a/nombre.scene.mjs --out /ruta/absoluta/a/nombre.gif --output-size 1600x900
node "$SKILL_ROOT/scripts/inspect.mjs" /ruta/absoluta/a/nombre.gif

render.mjs requiere Node, rsvg-convert, ffmpeg y ffprobe; verifica la disponibilidad e informa una herramienta faltante en lugar de instalar una. El tamaño de salida solicitado debe tener la misma relación de aspecto que el lienzo lógico de la escena, con cada dimensión de píxel como máximo 4096. Usa --poster /ruta/absoluta/a/preview.png cuando sea útil una vista previa estática.

Para una generación centrada en la calidad, sigue el flujo de trabajo de vista previa condicional y revisión en scene-recipes.md. Si este agente puede ver píxeles de imagen, ejecuta node "$SKILL_ROOT/scripts/preview.mjs" --scene /ruta/absoluta/a/nombre.scene.mjs --temporal-strip [--display-width 720], inspecciona los cuatro fotogramas clave y ocho fotogramas muestreados, y corrige defectos visuales concretos antes del renderizado final. Realiza como máximo dos rondas de revisión visual. Si el agente no puede ver píxeles de imagen, omite la revisión y vista previa visual; renderiza y ejecuta inspect.mjs solo para comprobaciones técnicas. Playwright no es necesario. inspect.mjs verifica dimensiones, número de fotogramas, duración, decodificación completa, fotogramas repetidos y la ejecución estática exacta más larga; no puede juzgar el pulido visual.

Entrega

Enlaza cada GIF y su código fuente de escena. Indica qué pasaje fuente ilustra, cualquier inferencia importante, el estilo elegido y las dimensiones/fps/duración/tamaño de archivo reales. Si se especificó una sección de entrada, confirma que cada escena provenga de ella. No afirmes la salida renderizada o la revisión visual a menos que se hayan completado realmente; cuando la revisión visual no estuvo disponible, dilo explícitamente.

Esta habilidad es para GIFs cortos y silenciosos. Usa un flujo de trabajo de diagrama estático para una imagen de arquitectura única e inmóvil y un flujo de trabajo de video para MP4 narrado.