/minimal-graphics: una idea explicada con formas y puntos en movimiento
El usuario da una idea ("cómo se vuelve viral una idea", "cómo una ley se convierte en ley", "el ciclo del agua", "a dónde va tu atención"). Tú eliges el patrón de movimiento que la representa, escribes una especificación breve, verificas un fotograma, renderizas el video y entregas un MP4 sin sonido (5-7 segundos).
${CLAUDE_SKILL_DIR} a continuación es la carpeta de este skill (la que contiene este SKILL.md). Si tu entorno no la 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 esta computadora esté configurada. "ready": true significa que funciona. De lo contrario, ejecuta los comandos que enumera 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 si falta ffmpeg). Si pip se niega con "entorno administrado externamente", 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)? Consulta el final de este archivo.
1. Elegir el patrón
| Patrón | Muestra | Bueno para | Campos |
|---|---|---|---|
spread | Un punto alcanza 2-4 otros, cada uno de esos alcanza más, anillo por anillo | Ideas virales, boca a boca, reacciones en cadena, referencias, cosas que se duplican | branches (2-4, por defecto 3), depth (2-5, por defecto 4), sequence (etiquetas cortas opcionales por anillo, ej. ["1","3","9","27","81"] o ["$1k","$2k","$4k"], se muestran en una línea debajo del título a medida que cada anillo se ilumina; unos pocos caracteres cada una) |
flow | Formas numeradas en orden, un punto viajando de una a la siguiente, luego un flujo constante | Cómo funciona algo, un proceso, un pipeline, una receta | steps: 2-6 etiquetas cortas; shapes (las formas son decorativas: ["circle"] las hace todas círculos) |
cycle | Pasos en un bucle con un punto que orbita continuamente | Ciclo del agua, bucle de hábitos, bucles de retroalimentación, estaciones, ciclos de sueño | steps: 3-6 etiquetas cortas; center: una palabra en el medio |
converge | Muchos puntos fluyendo hacia un círculo que crece (o "direction": "out": un círculo enviando puntos hacia varios) | A dónde va tu atención, tiempo o dinero; muchas entradas en un resultado | sources: 2-6 etiquetas (opcional); weights: cuántos puntos recibe cada uno; center: la palabra en el círculo; count: puntos (por defecto ~40) |
compare | Dos o tres cantidades lado a lado, como puntos (uno por unidad) o como círculos con tamaño proporcional a la cantidad | Cantidades "X vs Y": azúcar, costo, tiempo, calorías | groups: [{"label": "...", "value": n, "unit": "..."}]; highlight: índice del que se coloreará |
Si ninguno encaja bien, usa el más cercano y menciona eso en una línea; no fuerces una imagen engañosa. Un patrón muestra la forma de una idea; la línea takeaway dice el punto con palabras. Las ideas sobre dos fuerzas en equilibrio (oferta y demanda, equilibrio trabajo-vida) no tienen patrón propio: muéstralas como el bucle que las equilibra como cycle, o indícalo.
2. Escribir la especificación
Guarda minimal-<tema>.json:
{
"title": "Cómo se vuelve viral una idea",
"pattern": "spread",
"branches": 3,
"depth": 4,
"takeaway": "Cada persona se lo cuenta a tres más",
"theme": "coral"
}
Campos comunes: title (la idea como un titular o pregunta corta, hasta ~40 caracteres), subtitle (línea pequeña opcional debajo del título), takeaway (el punto en una línea; aparece debajo del título cuando la animación termina, y los largos se reducen para ajustarse), theme (coral por defecto, ink negro, paper blanco hueso, blue, mint), size ("1080x1920" por defecto, "1080x1080", "1920x1080"), duration (segundos; por defecto 5-6, más con un takeaway; uno más largo solo mantiene el final más tiempo), speed (0.7 = todo 30% más lento, 1.3 = más rápido), fps (por defecto 30).
Reglas de escritura:
- Las etiquetas son pequeñas: hasta 4 palabras cada una (etiquetas de secuencia: unos pocos caracteres). Sin jerga.
- Los números deben ser verdaderos. Si la idea necesita cifras de las que no estás seguro, déjalas fuera o di que son ilustrativas.
- Una idea por video. Si la idea del usuario tiene dos partes, haz dos videos (dos especificaciones).
Ejemplos en examples/: idea-goes-viral.json, bill-becomes-law.json (flow), water-cycle.json (cycle), where-attention-goes.json (converge), soda-vs-apple.json (compare).
3. Verificar dos fotogramas
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<tema>.json --still 2 --out minimal-<tema>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<tema>.json --still end --out minimal-<tema>-check2.png
--still toma segundos, o end. Míralos: ¿las etiquetas son legibles y no están recortadas, la imagen comunica la idea? Ajusta y verifica de nuevo si no.
4. Renderizar el video
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<tema>.json --out minimal-<tema>.mp4
Unos 10-25 segundos. Elimina las imágenes de verificación.
5. Entrega
Dale al usuario la ruta del MP4 (muéstralo si tu entorno puede mostrar archivos). No tiene sonido, listo para música o voz en off. Ofrece una variación (otro patrón o tema).
¿Sin 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 una página en su lugar:
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<tema>.json --html minimal-<tema>.html. La página se reproduce en cualquier navegador (muéstrala como un artefacto si puedes). Indica al usuario que el MP4 necesita Claude Code en una computadora, o una grabación de pantalla de la página.