SkillProof tested Claude skills

Dashmotion

Animerte mørk-tema flyt- og arkitekturdiagrammer som én selvstendig HTML-fil

av csthink · csthink/dashmotion

Bestått ★ 9.6/10

Dashmotion — Animerte mørk-tema flyt- og arkitekturdiagrammer som én selvstendig HTML-fil

Hva den gjør

Gjør en enkel engelsk beskrivelse eller Mermaid-kilde om til et animert teknisk diagram: en enkelt selvstendig HTML+SVG-fil der stiplede koblinger strømmer og lyse prikker reiser langs forespørselsbanen. Utløses ved forespørsler om flytskjema, pipeline, tilstandsmaskin, arkitektur, mikrotjenester eller nettverkstopologi, spesielt når diagrammet må se levende ut på en landingsside, README eller dokumentside.

Testrapport

Oppgave: Animert blokkdiagram av en CI/CD-pipeline (push → build → test → gate → deploy → smoke → rollback). Grunnlinjekjøring uten ferdighet – SVG skrevet for hånd, og den standard check_diagram.py fant 6 reelle defekter: to koblinger uten fill="none" (gjengis som svarte polygoner), rollback-banen går gjennom Test-boksen, dashoffset -8 med dasharray 5 5 (søm i hver syklus) og et punkt som flyr forbi linjen. Med ferdighet: beskrev semantikken i JSON, layout.py --render samlet filen – check_diagram.py ga PASS, 0 violations. Motoren utfoldet selv den omvendte kanten GATE→BUILD til annotasjonen ↻ og bygde 6 sammenkoblede animateMotion-punkter. Resultat – 7.7 KB, 0 eksterne lenker, SVG parses som gyldig XML, har prefers-reduced-motion og pauseAnimations; README-påstandene om «пара КБ, без зависимостей» bekreftet ved måling. Første gjengivelse krasjet med en tydelig valideringsfeil (hops-loggen krever par [from,to], ikke en liste med noder) – skriptet er ikke stille, men formatet i SKILL.md-kroppen er beskrevet mindre tydelig enn i references.

Testet på: 2026-07-17 · Claude Code 2.x (agent harness)

Installer

git clone https://github.com/csthink/dashmotion.git
mkdir -p ~/.claude/skills
cd dashmotion && cp -r skills/dashmotion ~/.claude/skills/dashmotion

Kommandoer og eksempelprompter

  • /dashmotionAnimerte mørk-tema flyt- og arkitekturdiagrammer som én selvstendig HTML-fil

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

  • 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

Full rapport →