What does this skill do, and when should you use it?
Dashmotion is a Claude skill that turns plain-English descriptions or Mermaid source into dark-themed animated technical diagrams, delivered as a single self-contained HTML file. It has two modes: Flow for workflows, pipelines and state machines, and Architecture for system topology, where requests travel as light dots along realistic end-to-end paths. The animation uses only two native techniques — stroke-dashoffset flowing dashes and animateMotion dots — with no libraries. A deterministic Python layout engine plus mechanical self-check scripts guarantee no overlaps, no connectors through boxes, and clean animation loops. The output is a few-KB vector file that loops forever and opens in any browser.
Reads a natural-language description or Mermaid (flowchart/graph/stateDiagram-v2) source; routes to Flow or Architecture mode (Mermaid input additionally gets verbatim fidelity checking of nodes and edges); parses the request into a semantic graph JSON; runs the pure-stdlib scripts/layout.py to compute coordinates and render the complete HTML; runs scripts/check_diagram.py to detect overlaps, connectors through boxes, dash-loop seams, out-of-bounds coordinates and more until it reports 0 violations; for Mermaid input, check_fidelity.py verifies labels and edge counts. The deliverable is a single file with embedded CSS and inline SVG, a visible pause toggle and prefers-reduced-motion support; optional GIF/MP4 export via timecut + ffmpeg.
- A developer who wants a Diagrid/Temporal-style animated architecture hero for a README or landing page instead of a heavy GIF.
- A docs writer with an existing static Mermaid flowchart who wants it moving in the docs without redrawing.
- A DevOps engineer showing a CI/CD pipeline or a Kubernetes microservices request path to the team.
- A product demo that needs to convey how a request flows — a dot hopping client → gateway → service → database and back.
- Teams that require reduced-motion accessibility support while still wanting animated diagrams.
How do you install this skill?
- Static review only; no scripts were executed, so rendering quality and checker behavior are unverified.
- Publisher is not registry-verified; identity unknown and maintenance/update path is not declared in visible files.
- The GIF/MP4 export path relies on npx timecut and ffmpeg — unreviewed third-party tooling; verify before use.
- Checker self-declares blind spots: text/label collisions, boundary 20px padding, and legend placement require manual reading of numbers.
- Non-ASCII (including Chinese) label width estimation is unverified against actual rendering; CJK labels may lay out imprecisely.
- Shell / CLI
- Local filesystem
Python 3 (for layout.py, check_diagram.py, check_fidelity.py; optional hand-computed fallback without it)Node.js (only for optional GIF/MP4 export via timecut)
Requires a Claude plan that includes skills (Pro, Max, Team, or Enterprise). Claude Code: run npx skills add csthink/dashmotion -a claude-code -g (-g installs globally to ~/.claude/skills/; omit for project-local). claude.ai: download dashmotion.zip from GitHub Releases, then Settings → Capabilities → Skills → + Add, upload and toggle on. Update with npx skills update dashmotion -g -y. The README recommends the copy install over symlink.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/csthink/dashmotion.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/dashmotion" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- animate this mermaid
- make the auth path stand out
- put Redis next to Postgres
After installing, trigger with one sentence, e.g. Use dashmotion to draw a simple 3-step login flow. or point it at a design doc: use dashmotion to draw the architecture in docs/design.md. Paste existing Mermaid source and say 'animate this mermaid'. Refine iteratively in plain language: 'make the auth path stand out', 'put Redis next to Postgres'. The resulting HTML opens directly in any browser by double-click; for GIF/MP4 the README documents the timecut recording command.
What are this skill's strengths and limitations?
- Dependency-free output: one HTML file, a few KB, vector, loops forever, opens in any browser.
- Deterministic Python layout engine plus mechanized checks (check_diagram.py, check_fidelity.py) — quality is verified by script, not eyeballing.
- Accessibility built in: prefers-reduced-motion handling, visible pause toggle, role="img" + title/desc.
- Mermaid conversion preserves topology and labels verbatim, and explicitly rejects unsupported diagram types instead of lossy guessing.
- Only Mermaid flowchart/graph and stateDiagram-v2 are supported; sequence, class, ER and gantt diagrams are not.
- The layout engine and checkers need Python 3; without it you fall back to a slow hand-computed path.
- Installation is documented and tested for Claude Code and claude.ai; other agent clients lack stated verification evidence in the source.
- Layout varies between generations — not pixel-identical across runs.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Dashmotion this page | 62 · Recommended | ★ 178 | 4mo ago | MIT |
| Draw.io Diagram Skill | 61 · Recommended | ★ 5.6k | 12d ago | Apache-2.0 |
| Diagram Design | 58 · Recommended | ★ 55k | 12d ago | MIT |
| Hand-Drawn Diagrams Skill | 53 · Use with care | ★ 79 | 28d ago | NOASSERTION |
| Academic Figure Prompt Generator | 69 · Recommended | ★ 2.6k | 7mo ago | MIT |
How did FollowSkills review this skill?
Evidence shows a purely local skill: no network calls, no web fonts (explicit system monospace stack), self-contained HTML output; semantic JSON goes to a temp path, never the user's folder; layout.py whitelist-validates colors/dashes to prevent SVG attribute injection and escapes quotes in attributes; check_diagram.py mandates machine verification over screenshots. No red-line risk found. Deductions: publisher identity unverified, no supply-chain caution for the optional npx timecut/ffmpeg export path — not full marks.
Very strong internal consistency: SKILL.md, references and scripts cross-reference coherently; layout.py has upfront validate_graph (including group parent-cycle detection, fail-closed with clear errors), fail-safe style-token guards, and documented known limitations; check_diagram.py implements deterministic C1-C9 checks with documented blind spots. Static review caps this at 10; awarding the full 10 since nothing contradicts the claimed behavior.
Trigger semantics are precise (flowchart/architecture/animated/mermaid trigger words and scenarios), unsupported Mermaid types are explicitly declared with alternatives offered, and limitations (no label-collision detection) are disclosed. Output is offline, self-contained HTML — no overseas service dependency, mainland-China friendly, with verbatim Chinese label preservation in the fidelity contract. Deductions: no worked examples or real invocation evidence; CJK width estimation unverified.
Excellent layered docs with progressive disclosure (SKILL.md → mode references → script contract), version 2.2.4, MIT license, explicit fallback paths. Deductions: no CHANGELOG, no stated maintainer/update path, no FAQ or example gallery; layout.py's contract is prose-only with the source declared a black box.
Design clearly beats manual drawing: deterministic layout engine + machine checks + fidelity recount remove the dominant hand-computation failure mode, with a concrete value proposition. But static review cannot confirm the rendered output is directly usable and no verified representative outputs exist; capped at 6 under the static ceiling of 7.
Both deterministic checker scripts plus layout.py are fully committed and independently auditable; facts and limitations are cleanly separated. Deductions: no CI workflow or committed test suite evidencing execution coverage of key paths, no third-party corroboration; capped at 4 under the static ceiling of 5.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →