Dashmotion
Diagramas de flujo y arquitectura animados con tema oscuro como un único archivo HTML autocontenido
Probado · Funciona
Qué hace
Convierte una descripción en inglés simple o una fuente Mermaid en un diagrama técnico animado: un único archivo HTML+SVG autocontenido donde los conectores punteados fluyen y los puntos de luz viajan por la ruta de solicitud. Se activa con solicitudes de diagramas de flujo, pipelines, máquinas de estado, arquitectura, microservicios o topología de red, especialmente cuando el diagrama necesita parecer vivo en una página de aterrizaje, README o sitio de documentación.
Informe de la prueba
Tarea: un diagrama de flujo animado de un pipeline CI/CD (push → build → test → gate → deploy → smoke → rollback). La ejecución base sin la habilidad — SVG escrito a mano, y el check_diagram.py estándar encontró 6 defectos reales: dos conectores sin fill="none" (se renderizan como polígonos negros), la ruta de rollback pasa a través del cuadro Test, dashoffset -8 con dasharray 5 5 (costura en cada ciclo) y un punto volando fuera de la línea. Con la habilidad: describió la semántica en JSON, layout.py --render ensambló el archivo — check_diagram.py dio PASS, 0 violaciones. El motor desplegó el borde inverso GATE→BUILD en la anotación ↻ y construyó 6 puntos animateMotion encadenados. Resultado — 7.7 KB, 0 enlaces externos, SVG se analiza como XML válido, hay prefers-reduced-motion y pauseAnimations; las declaraciones de README sobre «pocos KB, sin dependencias» se confirmaron con la medición. El primer renderizado falló con un error de validación claro (el registro de 'hops' requiere pares [from,to], no una lista de nodos) — el script no se calla, pero el formato en el cuerpo de SKILL.md se describe de forma menos clara que en las referencias.
Probado el: 2026-07-17 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/csthink/dashmotion.git mkdir -p ~/.claude/skills cd dashmotion && cp -r skills/dashmotion ~/.claude/skills/dashmotion
Comandos y prompts de ejemplo
/dashmotionDiagramas de flujo y arquitectura animados con tema oscuro como un único archivo HTML autocontenido
Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):
Make an animated diagram of our CI/CD pipeline with a retry loop and rollbackI need a self-contained animated architecture diagram for the READMETurn this Mermaid flowchart into a dark-theme animated HTML diagram