Archify Diagram Builder
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
Create premium animated technical diagrams as single self-contained HTML+SVG files — flowcharts whose connectors visibly flow and architecture diagrams where requests travel as glowing comet dots…
Install Glowmotion
$ npx skills add SylphAI-Inc/skills --skill glowmotion -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install SylphAI-Inc/skills glowmotion --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/SylphAI-Inc/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/glowmotion .claude/skills/glowmotion && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "glowmotion" agent skill from https://github.com/SylphAI-Inc/skills/tree/main/skills/glowmotion into .claude/skills/glowmotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glowmotion", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/SylphAI-Inc/skills/tree/main/skills/glowmotionType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add SylphAI-Inc/skills --skill glowmotion -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install SylphAI-Inc/skills glowmotion --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SylphAI-Inc/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/glowmotion .agents/skills/glowmotion && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "glowmotion" agent skill from https://github.com/SylphAI-Inc/skills/tree/main/skills/glowmotion into .agents/skills/glowmotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glowmotion", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SylphAI-Inc/skills --skill glowmotion -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install SylphAI-Inc/skills glowmotion --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SylphAI-Inc/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/glowmotion .cursor/skills/glowmotion && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "glowmotion" agent skill from https://github.com/SylphAI-Inc/skills/tree/main/skills/glowmotion into .cursor/skills/glowmotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glowmotion", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/SylphAI-Inc/skills.git --path skills/glowmotion--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add SylphAI-Inc/skills --skill glowmotion -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install SylphAI-Inc/skills glowmotion --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SylphAI-Inc/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/glowmotion .gemini/skills/glowmotion && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "glowmotion" agent skill from https://github.com/SylphAI-Inc/skills/tree/main/skills/glowmotion into .gemini/skills/glowmotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glowmotion", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install SylphAI-Inc/skills glowmotionInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add SylphAI-Inc/skills --skill glowmotion -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/SylphAI-Inc/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/glowmotion .github/skills/glowmotion && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "glowmotion" agent skill from https://github.com/SylphAI-Inc/skills/tree/main/skills/glowmotion into .github/skills/glowmotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glowmotion", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add SylphAI-Inc/skills --skill glowmotion -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install SylphAI-Inc/skills glowmotion --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/SylphAI-Inc/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/glowmotion .opencode/skills/glowmotion && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "glowmotion" agent skill from https://github.com/SylphAI-Inc/skills/tree/main/skills/glowmotion into .opencode/skills/glowmotion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "glowmotion", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
glowmotion- GitHub stars
- 112
- Token cost
- ~1.7k tokens
- SKILL.md length
- 748 words
- Files
- 7 (incl. scripts, references, assets)
- Skills in repo
- 8
- Repo updated
- First seen
- Licence
- None found
At a glance
Create premium animated technical diagrams as single self-contained HTML+SVG files — flowcharts whose connectors visibly flow and architecture diagrams where requests travel as glowing comet dots…
- Works in 3 steps: Pick the mode and theme → Author the graph, render the file → Verify before delivering (non-negotiable)
- The user asks for a flowchart
- SKILL.md covers Step 1 — Pick the mode and theme, Step 2 — Author the graph,…, Step 3 — Verify before… and Output contract
- Runs Python scripts from its folder; calls python3
What it does
Glowmotion is an agent skill from SylphAI-Inc/skills. Create premium animated technical diagrams as single self-contained HTML+SVG files — flowcharts whose connectors visibly flow and architecture diagrams where requests travel as glowing comet dots with fading trails, pulsing module highlights, and a built-in light/dark theme toggle (dark themes midnight/neon/aurora + light theme daylight). Use this skill whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network…
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including scripts, reference files and assets (for example `README.md`, `references/graph-format.md` and `scripts/check_diagram.py`).
It sits in Development, covering Diagrams. It works with Mermaid. The repository describes itself as: Community-shareable skills for AdaL — the automation-first agent harness.
When your agent uses it
- The user asks for a flowchart
- Process diagram
- System architecture
- Network topology diagram — especially when they mention animated
Example prompts
- “animated”
- “glowing”
- “premium”
- “/glowmotion”
Requirements
- Python 3
- Node.js
Workflow steps
3 steps, taken from the step headings in SKILL.md.
- Pick the mode and theme
- Author the graph, render the file
- Verify before delivering (non-negotiable)
What it can do on your machine
Read from SKILL.md and the folder at commit 51a5abd. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 3 files in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Glowmotion loads about 1.7k tokens when it runs, and up to ~3.4k if it reads all its reference files. Until then it costs about 246 tokens; SKILL.md has 748 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 748 words (~1,674 tokens).
“Create premium animated technical diagrams as single self-contained HTML files. Glowmotion combines a deterministic layout engine (dashmotion lineage: the script computes every coordinate and route, mechanized checkers verify the result) with a lanshu-style premium finish (glow-trail dots, pulsing module halos…”
- name
- glowmotion
- author
- Aria068
- version
- 0.2.0
Files
SKILL.md and 6 other files (scripts, references, assets) in skills/glowmotion of SylphAI-Inc/skills.
- SKILL.md
- README.md
- assets/loop-engineering-glowmotion.gif
- references/graph-format.md
- scripts/check_diagram.py
- scripts/check_fidelity.py
- scripts/layout.py
Open the folder on GitHubat commit 51a5abd
Compare with similar skills
Glowmotion next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Glowmotion this skillSylphAI-Inc/skills | 112 | — | ~1.7k | Automated safety check: Pass | None | |
| Archify Diagram BuilderUnclecheng-li/AI_Animation | 1.5k | 2 repos | ~4.1k | Automated safety check: Pass | MIT | |
| Markstream Vue2 ViteSimon-He95/markstream-vue | 3k | 1 repos | ~706 | Automated safety check: Pass | MIT | |
| Apex Python Diagramsjonathan-vella/apex | 217 | — | ~2k | Automated safety check: Pass | MIT | |
| VisualizeUndertone0809/rudder | 292 | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Pkf SVGPrismer-AI/PrismerCloud | 1.6k | — | ~3.8k | Automated safety check: Pass | MIT |
Similar skills
Markstream Vue2 Vite
Simon-He95/markstream-vue
Integrate markstream-vue2 into a Vue 2 plus Vite app. An agent skill from Simon-He95/markstream-vue.
Apex Python Diagrams
jonathan-vella/apex
UTILITY SKILL — Python diagram generation for Azure architectures, WAF/cost/compliance charts, ERDs, swimlanes, timelines, and wireframes.
Visualize
Undertone0809/rudder
Create safe inline visual explanations in Rudder Chat. An agent skill from Undertone0809/rudder.
Pkf SVG
Prismer-AI/PrismerCloud
Design controlled SVG, visual widgets, topology and Visual Core explainers with semantic color, safe geometry, accessibility, and bounded complexity.
Diagram Generator
luongnv89/skills
Generate a diagram and route to the right engine — draw.io XML (precise, editable, C4, swimlanes) or Excalidraw JSON (hand-drawn, sketch, wireframes).
More from SylphAI-Inc/skills
All 8 skills in this repoCodegraph
SylphAI-Inc/skills
Turn any codebase into an explorable interactive graph so a developer can understand it fast.
Finger Frame AI
SylphAI-Inc/skills
Generate a finished cyberpunk-styled finger-frame effect video from a local clip using Gemini Omni restyling, MediaPipe hand tracking, and FFmpeg compositing.
Model Office
SylphAI-Inc/skills
Launches "Model Office" — a live browser dashboard that visualizes multi-model job routing as a blocky Lego/Minecraft-style pixel office.
Posthog Analytics
SylphAI-Inc/skills
Automate PostHog dashboard creation, sync, update, and export via API
Create Skill
SylphAI-Inc/skills
Guide users through creating AdaL skills by clarifying the skill type (personal, project, or public plugin) and scaffolding the appropriate structure.
Clone Anywebsite
SylphAI-Inc/skills
Clone any website's landing page with pixel-perfect fidelity.
Related
Works with
Categories
Questions about Glowmotion
What does Glowmotion do?
Create premium animated technical diagrams as single self-contained HTML+SVG files — flowcharts whose connectors visibly flow and architecture diagrams where requests travel as glowing comet dots…. Glowmotion is an agent skill from SylphAI-Inc/skills. Create premium animated technical diagrams as single self-contained HTML+SVG files — flowcharts whose connectors visibly flow and architecture diagrams where requests travel as glowing comet dots with fading trails, pulsing module highlights, and a built-in light/dark theme toggle (dark themes midnight/neon/aurora + light theme daylight).
When should I use Glowmotion?
Glowmotion fits situations like: the user asks for a flowchart; process diagram; system architecture; network topology diagram — especially when they mention animated.
How do I install Glowmotion in Claude Code?
Run `npx skills add SylphAI-Inc/skills --skill glowmotion -a claude-code`. Or copy the skill folder (skills/glowmotion in SylphAI-Inc/skills) into .claude/skills/glowmotion in your project. Claude Code loads it when a task matches its description.
How do I install Glowmotion in Codex?
Run `npx skills add SylphAI-Inc/skills --skill glowmotion -a codex`. Or copy the skill folder (skills/glowmotion in SylphAI-Inc/skills) into .agents/skills/glowmotion in your project. Codex loads it when a task matches its description.
Can I use Glowmotion in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add SylphAI-Inc/skills --skill glowmotion -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/glowmotion, .gemini/skills/glowmotion, .github/skills/glowmotion and .opencode/skills/glowmotion in your project.
What does Glowmotion need to run?
Going by SKILL.md and its folder, Glowmotion needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3; Node.js.
Does Glowmotion access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Glowmotion safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Glowmotion use?
No licence was found for Glowmotion or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Glowmotion use?
About 1.7k tokens (SKILL.md is roughly 6.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.7k tokens, read only when the agent opens those files.
What are the alternatives to Glowmotion?
Skills that share tags, products or a category with Glowmotion: Archify Diagram Builder (Unclecheng-li/AI_Animation, 1.5k stars), Markstream Vue2 Vite (Simon-He95/markstream-vue, 3k stars), Apex Python Diagrams (jonathan-vella/apex, 217 stars) and Visualize (Undertone0809/rudder, 292 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Glowmotion?
SylphAI-Inc (a GitHub organization) maintains it in SylphAI-Inc/skills, which has 112 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on September 22, 2026.
Source: SylphAI-Inc/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.