/graph: tus números se convierten en un gráfico animado
El usuario proporciona números en cualquier formato: Mar 200K, Abr 650K, Nov 1.5M, una tabla copiada, un archivo CSV, una captura de pantalla o una frase. Tú los conviertes en una especificación pequeña, verificas un fotograma, renderizas el video y entregas un MP4 silencioso (de unos 5 segundos).
${CLAUDE_SKILL_DIR} a continuación es la carpeta de este skill (donde se encuentra este SKILL.md). Si tu entorno no lo completa, usa la ruta de esa carpeta. Guarda todo en la carpeta actual del usuario, o en la carpeta que él indique.
0. Verificación de configuración
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check
Tarda unos segundos; ejecútalo si no estás seguro de que este equipo esté configurado. "ready": true significa que está listo. De lo contrario, ejecuta los comandos que aparecen bajo "fix", informando al usuario que es una instalación única: python3 -m pip install playwright (el controlador del navegador), python3 -m playwright install chromium (solo cuando Google Chrome o Edge no esté instalado, unos 150 MB) y python3 -m pip install imageio-ffmpeg (solo cuando falte ffmpeg). Si pip se niega con "externally managed environment", crea un entorno privado una vez y usa su Python para todos los comandos: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, luego ~/.animate-skills/bin/python -m playwright install chromium si es necesario. En Windows, usa py en lugar de python3. ¿No hay navegador posible aquí (por ejemplo, el sandbox de la app de Claude)? Ve al final de este archivo.
1. Escribe la especificación
Guarda graph-<tema>.json:
{
"title": "Mis seguidores de Instagram",
"subtitle": "2026",
"data": [["Mar", 200000], ["Abr", 650000], ["Nov", 1500000]],
"source": "Instagram",
"theme": "night"
}
Reglas:
- Usa los números exactos del usuario. Nunca inventes, suavices, redondees o rellenes valores. Si algo es realmente ambiguo (qué columna, qué unidad), haz una pregunta breve; de lo contrario, continúa.
- Escribe números completos: 650K →
650000, 1.5M →1500000, 12% →12con"suffix": "%". - Mantén las etiquetas cortas (hasta ~8 caracteres se ve mejor):
Mar,T1,2024,Lun. - El título indica qué son los números, usando las palabras del usuario cuando sea posible (máximo ~30 caracteres;
|fuerza un salto de línea). Añadesubtitleysourcesolo cuando el usuario los haya proporcionado o sean evidentes a partir de la solicitud ("mis seguidores de Instagram" → fuente Instagram); no los inventes.
| Campo | Qué hace |
|---|---|
title, subtitle | Título y una línea pequeña debajo (período, unidad). |
data | [["etiqueta", número], ...] o [{"label": "...", "value": n}, ...], en orden. |
type | Déjalo vacío para automático: barras hasta 10 valores; una línea para series más largas, y para valores que cambian poco en relación con su tamaño (un peso que baja de 210 a 178, un precio, una temperatura), donde la línea se acerca al rango. "bar" o "line" para forzar. |
prefix, suffix | Unidades: "$", "€", "%", " kg". |
decimals | Forzar decimales. Por defecto, cada valor mantiene los suyos. |
compact | Por defecto muestra 10,000+ como 12K / 1.5M / 2B. false para números completos. |
callout | Déjalo vacío para la etiqueta de crecimiento automática del primer al último valor (↑ 7.5x; números enteros desde 10x, ↑ 77x; ↑ 32%; ↓ 18%). Un texto corto propio ("De vuelta a ganancias"), o null para ninguno. |
good | "down" cuando menos es mejor (pérdida de peso, deuda pagada, costos, tiempos de carrera): una caída obtiene una etiqueta verde en lugar de roja. |
highlight | Qué barra es dorada: "last" (por defecto), "max", un índice, o "none". |
theme | night (azul marino oscuro, barras coral; por defecto), light, sunset, mint. |
source | Nota pequeña "Fuente: ..." debajo del gráfico. |
size | "1080x1920" (vertical, por defecto), "1080x1080", "1920x1080". |
duration, fps | Segundos (por defecto ~5) y fotogramas por segundo (por defecto 30; 60 es más suave pero más lento). |
Ejemplos: examples/instagram-followers.json (barras), examples/website-visitors-line.json (línea).
2. Verifica el último fotograma
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<tema>.json --still end --out graph-<tema>-check.png
Mira la imagen (tarda 2-3 segundos en crearse): etiquetas legibles, nada superpuesto, los números exactamente los del usuario. Corrige la especificación y verifica de nuevo si no.
3. Renderiza el video
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<tema>.json --out graph-<tema>.mp4
Unos 10-20 segundos. Elimina la imagen de verificación.
4. Entrega
Dale al usuario la ruta del MP4 (muéstrala si tu entorno puede mostrar archivos). No tiene sonido, listo para música o una locución. Ofrece una variación rápida (otro tema, el tamaño cuadrado, una línea en lugar de barras).
¿No hay navegador aquí? (por ejemplo, el sandbox de la app de Claude)
Si la verificación de configuración no puede ejecutar un navegador, escribe la animación como página en su lugar: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" graph-<tema>.json --html graph-<tema>.html. La página reproduce el gráfico en cualquier navegador (muéstrala como artefacto si puedes). Dile al usuario que el MP4 necesita Claude Code en una computadora, o una grabación de pantalla de la página.