Dashmotion
Diagrammes de flux et d'architecture animés en thème sombre sous forme de fichier HTML autonome.
Testé · Fonctionne
Ce que fait
Transforme une description en langage courant ou une source Mermaid en un diagramme technique animé : un seul fichier HTML+SVG autonome où les connecteurs en pointillés s'animent et les points lumineux parcourent le chemin de la requête. Se déclenche sur les demandes de diagrammes de flux, de pipelines, de machines d'état, d'architecture, de microservices ou de topologie réseau, en particulier lorsque le diagramme doit être vivant sur une page de destination, un README ou un site de documentation.
Rapport de test
Tâche : un diagramme de flux animé de pipeline CI/CD (push → build → test → gate → deploy → smoke → rollback). L'exécution de base sans la compétence — le SVG est écrit à la main, et le check_diagram.py standard y a trouvé 6 défauts réels : deux connecteurs sans fill="none" (rendus comme des polygones noirs), le chemin rollback passe à travers la boîte Test, dashoffset -8 avec dasharray 5 5 (une couture à chaque cycle) et un point volant hors de la ligne. Avec la compétence : j'ai décrit la sémantique en JSON, layout.py --render a assemblé le fichier — check_diagram.py a donné PASS, 0 violations. Le moteur a lui-même transformé l'arête inverse GATE→BUILD en annotation ↻ et a construit 6 points animateMotion enchaînés. Résultat — 7,7 Ko, 0 liens externes, le SVG est parsé comme un XML valide, il y a prefers-reduced-motion et pauseAnimations ; les déclarations du README concernant « quelques Ko, sans dépendances » ont été confirmées par la mesure. Le premier rendu a échoué avec une erreur de validation claire (le journal hops nécessite des paires [from,to], et non une liste de nœuds) — le script ne reste pas silencieux, mais le format dans le corps de SKILL.md est décrit moins clairement que dans les references.
Testé le: 2026-07-17 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/csthink/dashmotion.git mkdir -p ~/.claude/skills cd dashmotion && cp -r skills/dashmotion ~/.claude/skills/dashmotion
Commandes et exemples de prompts
/dashmotionDiagrammes de flux et d'architecture animés en thème sombre sous forme de fichier HTML autonome.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
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