Dashmotion

Animované dark-theme flow a architektury diagramy jako jeden self-contained HTML soubor

od csthink · csthink/dashmotion

Otestováno · Funguje ★ 9.6/10

Dashmotion — Animované dark-theme flow a architektury diagramy jako jeden self-contained HTML soubor

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 rollback
  • I need a self-contained animated architecture diagram for the README
  • Turn this Mermaid flowchart into a dark-theme animated HTML diagram