Dashmotion
Geanimeerde dark-theme flow- en architectuurdiagrammen als één zelfstandig HTML-bestand
Getest · Werkt
Wat het doet
Zet een gewone Engelse beschrijving of Mermaid source om in een geanimeerd technisch diagram: een enkel zelfstandig HTML+SVG bestand waar gestippelde connectoren stromen en lichtpuntjes het aanvraagpad volgen. Activeert bij flowchart, pipeline, state machine, architecture, microservices of network topology verzoeken, vooral wanneer het diagram levendig moet lijken op een landingspagina, README of docs site.
Testrapport
Taak: een geanimeerd CI/CD pijplijn flowchart (push → build → test → gate → deploy → smoke → rollback). De baseline run zonder de skill — SVG werd handmatig geschreven, en de standaard check_diagram.py vond er 6 echte defecten in: twee connectoren zonder fill="none" (gerenderd als zwarte polygonen), het rollback pad liep door de Test box, dashoffset -8 met dasharray 5 5 (een naad bij elke cyclus), en een punt dat voorbij de lijn vloog. Met de skill: ik beschreef de semantiek in JSON, layout.py --render assembleerde het bestand — check_diagram.py gaf PASS, 0 overtredingen. De engine zelf ontvouwde de omgekeerde rand GATE→BUILD in een ↻ annotatie en bouwde 6 gekoppelde animateMotion-punten. Resultaat — 7.7 KB, 0 externe links, SVG geparst als geldige XML, had prefers-reduced-motion en pauseAnimations; README claims over «a couple of KB, no dependencies» werden bevestigd door meting. De eerste render mislukte met een duidelijke validatiefout (de hops log vereiste [from,to] paren, niet een lijst van nodes) — het script was niet stil, maar het formaat in de body van SKILL.md werd minder expliciet beschreven dan in references.
Getest op: 2026-07-17 · Claude Code 2.x (agent harness)
Installatie
git clone https://github.com/csthink/dashmotion.git mkdir -p ~/.claude/skills cd dashmotion && cp -r skills/dashmotion ~/.claude/skills/dashmotion
Commando's en voorbeeldprompts
/dashmotionGeanimeerde dark-theme flow- en architectuurdiagrammen als één zelfstandig HTML-bestand
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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