Dashmotion

Create dark-themed, animated technical diagrams as self-contained HTML+SVG files — flowcharts whose connectors visibly flow, and architecture diagrams where requests travel as light dots through the system (Diagrid/Temporal landing-page style). Use this skill whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network topology diagram — and especially when they mention "animated", "flowing", "dynamic", "alive", "GIF-like", or want a diagram for a landing page, README, docs, or product demo. Al

184 stars 16 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add csthink/dashmotion --skill dashmotion

Manual install

git clone --depth 1 https://github.com/csthink/dashmotion.git /tmp/dashmotion
mkdir -p ~/.claude/skills
cp -r /tmp/dashmotion/skills/dashmotion ~/.claude/skills/dashmotion

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Dashmotion

Create professional animated technical diagrams as single self-contained HTML files. The name is the implementation: `stroke-dash`offset animation + `animateMotion` — that's all there is. Output is vector, loops forever, weighs a few KB, and opens in any browser.

## Step 1 — Pick the mode

| User wants | Mode | Read |
|---|---|---|
| Steps, sequence, branching, parallel execution, state transitions ("what happens, in what order") | **Flow** | `references/flow-mode.md` + `resources/template-flow.html` |
| Components, services, infrastructure, containment, topology ("what the system is made of") | **Architecture** | `references/architecture-mode.md` + `resources/template-architecture.html` |

Mixed request ("show our microservices AND how an order flows through them") → Architecture mode; the animated request path *is* the flow. Only produce two separate files if the process has branching logic that the topology can't express.

Read the full skill on GitHub

Details

Skill name: dashmotion
Repository: csthink/dashmotion
Path: skills/dashmotion/SKILL.md
License: MIT
Repo updated: 16 June 2026
Listed in: BehiSecc/awesome-claude-skills, VoltAgent/awesome-agent-skills

FAQ

What does the Dashmotion skill do?

How do I install the Dashmotion skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add csthink/dashmotion --skill dashmotion. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Dashmotion popular?

It lives in csthink/dashmotion, which has 184 GitHub stars and 16 forks, and is included in 2 curated skill lists.

Related skills

Anydesign

236

uxKero/anydesign

Extract the design of a screenshot, website URL or Figma file into a design.md with tokens, components, layout and brand rules, or copy one element (navbar, card, illustration) into an element.md with a rebuild or image-generation prompt. Use when the user wants to document, replicate, audit or reverse-engineer a visual design: its design system, palette, typography or style.

Frontend & DesignIn 1 list14

Oil Icon

322

oil-oil/oil-icon

生成风格统一的图标集合，通过宫格生图、切分和去背景交付透明 PNG。用户需要成套自定义图标、栏目图标或匹配品牌风格的图标时使用；不用于单个简单矢量图标或小尺寸密集功能符号。

Frontend & Design30

Naming

128

glacierphonk/naming

Name products, SaaS, brands, open source projects, bots, and apps. Use when the user needs to name something, find a brand name, or pick a product name. Metaphor-driven process that produces memorable, meaningful names and avoids AI slop.

Frontend & DesignIn 3 lists14

Sanity Best Practices

194

sanity-io/agent-toolkit

Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, webhooks, Blueprints, and framework integrations such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, the App SDK, and Studios or apps running in the Sanity Dashboard (defineApplication). Use this skill whenever working with Sanity schemas, defineType or defineField, GROQ or defineQuery, content modeling, Presentation or preview setups, Sanity-powered frontend integrations, event-driven content automation,

Frontend & DesignIn 1 list31

AI Game Art Pipeline

306

ybuild-ai/ai-game-art-pipeline-skill

Provider-neutral open-source skill for planning and producing game-runtime art assets and animation: static props/icons, canonical character sheets, combat sprites, 3D/video motion references, Veo/Seedance-style video-to-frames, cinematic ultimates, backgrounds, FX, SFX, runtime packaging, and QA. Use when building actual game assets for PixiJS/Canvas/Unity/Godot/SpriteKit/etc., not one-off marketing images.

Frontend & Design

React Email

208

resend/resend-skills

Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.

Frontend & DesignIn 2 lists34

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.