Dashmotion
Animierte Fluss- und Architekturdiagramme im dunklen Design als eine eigenständige HTML-Datei.
Getestet · Funktioniert
Was es kann
Wandelt eine plain-English description oder Mermaid source in ein animated technical diagram um: eine single self-contained HTML+SVG file, where dashed connectors stream and light dots travel the request path. Wird ausgelöst bei flowchart, pipeline, state machine, architecture, microservices oder network topology requests, especially when the diagram needs to look alive on a landing page, README oder docs site.
Testbericht
Задача: анимированная блок-схема CI/CD-пайплайна (push → build → test → gate → deploy → smoke → rollback). Der Basisdurchlauf ohne Skill — SVG написан руками, и штатный check_diagram.py нашёл в нём 6 настоящих дефектов: zwei коннектора без fill="none" (рендерятся чёрными полигонами), der путь rollback проходит сквозь бокс Test, dashoffset -8 при dasharray 5 5 (шов на каждом цикле) и точка, летящая мимо линии. Mit dem Skill: описал семантику в JSON, layout.py --render собрал файл — check_diagram.py gab PASS, 0 violations. Die Engine selbst развернул обратное ребро GATE→BUILD in die аннотацию ↻ und baute 6 сцепленных animateMotion-точек. Ergebnis — 7.7 КБ, 0 externe Links, SVG wird als валидный XML geparst, es gibt prefers-reduced-motion und pauseAnimations; die Aussagen README про «пара КБ, без зависимостей» wurden durch Messung bestätigt. Das erste Rendering fiel mit einem внятной ошибкой валидации aus (журнал hops erfordert Paare [from,to], а не список узлов) — скрипт не молчит, aber das Format im SKILL.md-Body ist менее явно beschrieben als in den references.
Getestet am: 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
Befehle & Beispiel-Prompts
/dashmotionAnimierte Fluss- und Architekturdiagramme im dunklen Design als eine eigenständige HTML-Datei.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
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