Dashmotion
Animowane diagramy przepływu i architektury w ciemnym motywie jako jeden samodzielny plik HTML.
Testowano · Działa
Co robi ten skill
Przekształca opis w prostym języku angielskim lub źródło Mermaid w animowany diagram techniczny: pojedynczy, samodzielny plik HTML+SVG, w którym przerywane łączniki płyną, a jasne kropki przemieszczają się po ścieżce żądania. Uruchamia się na żądania dotyczące schematów blokowych, potoków, maszyn stanów, architektury, mikroserwisów lub topologii sieci, zwłaszcza gdy diagram ma wyglądać dynamicznie na stronie docelowej, w README lub na stronie dokumentacji.
Raport z testu
Zadanie: animowany schemat blokowy potoku CI/CD (push → build → test → gate → deploy → smoke → rollback). Podstawowe uruchomienie bez umiejętności — SVG napisany ręcznie, a standardowy check_diagram.py znalazł w nim 6 prawdziwych defektów: dwa łączniki bez fill="none" (renderowane jako czarne poligony), ścieżka rollback przechodzi przez pole Test, dashoffset -8 przy dasharray 5 5 (szew w każdym cyklu) i punkt lecący obok linii. Z umiejętnością: opisał semantykę w JSON, layout.py --render zebrał plik — check_diagram.py dał PASS, 0 naruszeń. Silnik sam rozwinął odwrotną krawędź GATE→BUILD w adnotację ↻ i zbudował 6 połączonych punktów animateMotion. Wynik — 7.7 KB, 0 zewnętrznych linków, SVG parsowany jako prawidłowy XML, dostępne prefers-reduced-motion i pauseAnimations; deklaracje README o «kilku KB, bez zależności» zostały potwierdzone pomiarem. Pierwsze renderowanie zawiodło z wyraźnym błędem walidacji (dziennik hops wymaga pary [from,to], a nie listy węzłów) — skrypt nie milczy, ale format w treści SKILL.md jest opisany mniej jasno niż w references.
Testowano: 2026-07-17 · Claude Code 2.x (agent harness)
Instalacja
git clone https://github.com/csthink/dashmotion.git mkdir -p ~/.claude/skills cd dashmotion && cp -r skills/dashmotion ~/.claude/skills/dashmotion
Komendy i przykładowe prompty
/dashmotionAnimowane diagramy przepływu i architektury w ciemnym motywie jako jeden samodzielny plik HTML.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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