Dashmotion
Animerede mørktema-flow- og arkitekturdiagrammer som én selvstændig HTML-fil
Testet · Virker
Hvad det gør
Omdanner en almindelig engelsk beskrivelse eller Mermaid-kilde til et animeret teknisk diagram: en enkelt selvstændig HTML+SVG-fil, hvor stiplede forbindelser strømmer, og lyse prikker bevæger sig langs anmodningsstien. Udløses ved flowchart, pipeline, state machine, arkitektur, mikroservices eller netværkstopologi-anmodninger, især når diagrammet skal se levende ud på en landingsside, README eller docs-site.
Testrapport
Opgave: et animeret flowchart for en CI/CD-pipeline (push → build → test → gate → deploy → smoke → rollback). Baseline-kørslen uden skill — SVG'en er skrevet i hånden, og den standard check_diagram.py fandt i den 6 reelle defekter: to konnektorer uden fill="none" (renderes som sorte polygoner), rollback-stien går gennem Test-boksen, dashoffset -8 med dasharray 5 5 (søm ved hver cyklus) og et punkt, der flyver forbi linjen. Med skill'en: beskrev semantikken i JSON, layout.py --render samlede filen — check_diagram.py gav PASS, 0 violations. Motoren udfoldede selv den omvendte kant GATE→BUILD til annotationen ↻ og konstruerede 6 sammenkædede animateMotion-punkter. Resultat — 7.7 KB, 0 eksterne links, SVG parses som gyldig XML, der er prefers-reduced-motion og pauseAnimations; README's udsagn om «et par KB, uden afhængigheder» blev bekræftet ved måling. Den første rendering fejlede med en klar valideringsfejl (hops-loggen kræver par [from,to], ikke en liste over noder) — scriptet er ikke tavst, men formatet i SKILL.md er beskrevet mindre tydeligt end i references.
Testet: 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
Kommandoer og eksempelprompter
/dashmotionAnimerede mørktema-flow- og arkitekturdiagrammer som én selvstændig HTML-fil
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
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