Dashmotion
Animované dark-theme flow a architektury diagramy jako jeden self-contained HTML soubor
Otestováno · Funguje
Co umí
Přemění plain-English description nebo Mermaid source na animated technical diagram: single self-contained HTML+SVG soubor, kde dashed connectors stream a light dots travel the request path. Spouští se na flowchart, pipeline, state machine, architecture, microservices nebo network topology requests, zejména když diagram potřebuje vypadat alive na landing page, README nebo docs site.
Testovací report
Úkol: animated CI/CD pipeline flowchart (push → build → test → gate → deploy → smoke → rollback). Baseline run bez skillu — SVG byl napsán manually, a standard check_diagram.py našel 6 real defects v něm: two connectors without fill="none" (rendered as black polygons), rollback path prošel přes Test box, dashoffset -8 s dasharray 5 5 (seam on each cycle), a point flying past the line. Se skillem: popsal jsem semantics v JSON, layout.py --render sestavil soubor — check_diagram.py dal PASS, 0 violations. Engine sám rozvinul reverse edge GATE→BUILD do ↻ annotation a postavil 6 chained animateMotion-points. Výsledek — 7.7 KB, 0 external links, SVG parsed as valid XML, měl prefers-reduced-motion a pauseAnimations; README claims o «a couple of KB, no dependencies» byly potvrzeny měřením. První render selhal s clear validation error (hops log vyžadoval [from,to] pairs, nikoli list of nodes) — script nebyl silent, ale format v SKILL.md's body byl popsán méně explicitně než v references.
Testováno: 2026-07-17 · Claude Code 2.x (agent harness)
Instalace
git clone https://github.com/csthink/dashmotion.git mkdir -p ~/.claude/skills cd dashmotion && cp -r skills/dashmotion ~/.claude/skills/dashmotion
Příkazy a ukázkové prompty
/dashmotionAnimované dark-theme flow a architektury diagramy jako jeden self-contained HTML soubor
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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