Official agent skill

Msagljs

Use MSAGL-JS (Microsoft Automatic Graph Layout) to lay out and visualize networks in JavaScript or TypeScript.

OfficialMITAuto-check passedDocuments & Office

Install Msagljs

skills CLI

$ npx skills add microsoft/msagljs --skill msagljs -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install microsoft/msagljs msagljs --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/microsoft/msagljs.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/msagljs .claude/skills/msagljs && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "msagljs" agent skill from https://github.com/microsoft/msagljs/tree/main/skills/msagljs into .claude/skills/msagljs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "msagljs", 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

$skill-installer install https://github.com/microsoft/msagljs/tree/main/skills/msagljs

Type 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.

skills CLI

$ npx skills add microsoft/msagljs --skill msagljs -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install microsoft/msagljs msagljs --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/microsoft/msagljs.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/msagljs .agents/skills/msagljs && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "msagljs" agent skill from https://github.com/microsoft/msagljs/tree/main/skills/msagljs into .agents/skills/msagljs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "msagljs", 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.

skills CLI

$ npx skills add microsoft/msagljs --skill msagljs -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install microsoft/msagljs msagljs --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/microsoft/msagljs.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/msagljs .cursor/skills/msagljs && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "msagljs" agent skill from https://github.com/microsoft/msagljs/tree/main/skills/msagljs into .cursor/skills/msagljs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "msagljs", 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

$ gemini skills install https://github.com/microsoft/msagljs.git --path skills/msagljs

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add microsoft/msagljs --skill msagljs -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install microsoft/msagljs msagljs --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/microsoft/msagljs.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/msagljs .gemini/skills/msagljs && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "msagljs" agent skill from https://github.com/microsoft/msagljs/tree/main/skills/msagljs into .gemini/skills/msagljs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "msagljs", 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.

GitHub CLI

$ gh skill install microsoft/msagljs msagljs

Installs 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).

skills CLI

$ npx skills add microsoft/msagljs --skill msagljs -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/microsoft/msagljs.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/msagljs .github/skills/msagljs && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "msagljs" agent skill from https://github.com/microsoft/msagljs/tree/main/skills/msagljs into .github/skills/msagljs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "msagljs", 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.

skills CLI

$ npx skills add microsoft/msagljs --skill msagljs -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install microsoft/msagljs msagljs --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/microsoft/msagljs.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/msagljs .opencode/skills/msagljs && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "msagljs" agent skill from https://github.com/microsoft/msagljs/tree/main/skills/msagljs into .opencode/skills/msagljs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "msagljs", 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: msagljs
GitHub stars: 174
Token cost: ~1.2k tokens
SKILL.md length: 519 words
Files: 21 (incl. scripts, references)
Skills in repo: 1
Repo updated: Oct 2, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Use MSAGL-JS (Microsoft Automatic Graph Layout) to lay out and visualize networks in JavaScript or TypeScript.

Works in 7 steps: Inspect the target project's package… → Determine whether the result should be… → Identify the graph source: programmatic… → …
Graph and network layout
SKILL.md covers Choose the workflow, Required process, Invariants and Static export helper, plus 1 more section
Runs TypeScript scripts from its folder; calls npm and node

What it does

Msagljs is an agent skill from microsoft/msagljs, published by the product's own GitHub organization. Use MSAGL-JS (Microsoft Automatic Graph Layout) to lay out and visualize networks in JavaScript or TypeScript. Use for graph and network layout, DOT/JSON/JGF parsing, live embedded SVG or WebGL graphs, Sugiyama/MDS/IPSepCola layouts, edge routing, and exporting SVG, PDF, PNG, EPS, or PostScript figures for LaTeX and other documents.

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 23 other files, including scripts and reference files (for example `examples/core-layout.ts`, `examples/live-svg-page.ts` and `examples/live-webgl-page.ts`). Compatibility notes: JavaScript or TypeScript. Browser APIs are required for SVG/WebGL rendering. The static export helper requires Node.js 20+ and optionally Ghostscript for EPS…

It sits in Documents & Office, covering 3D graphics and WebGL and LaTeX. It works with TypeScript, JavaScript and LaTeX. The repository describes itself as: A JavaScript graph layout engine: port of MSAGL. The licence is MIT.

When your agent uses it

Graph and network layout
DOT/JSON/JGF parsing
Live embedded SVG
Sugiyama/MDS/IPSepCola layouts

Example prompts

“/msagljs”

Requirements

Node.js
Compatibility (from SKILL.md): JavaScript or TypeScript. Browser APIs are required for SVG/WebGL rendering. The static export helper requires Node.js 20+ and optionally Ghostscript for EPS or PostScript.

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

Inspect the target project's package manager, framework, runtime, and existing
Determine whether the result should be core geometry, a live SVG viewer, a
Identify the graph source: programmatic nodes and edges, inline DOT/JSON, a
Install every @msagl/* package imported directly by the code. Do not rely
Select the layout and routing based on graph direction, graph size, and the
Implement the matching workflow using public package exports.
Validate with the target project's existing typecheck, build, tests, or a

What it can do on your machine

Read from SKILL.md and the folder at commit 33098ff. 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 1 file in scripts/ (TypeScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
- npm
- node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
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.
Compatibility
JavaScript or TypeScript. Browser APIs are required for SVG/WebGL rendering. The static export helper requires Node.js 20+ and optionally Ghostscript for EPS or PostScript.
From compatibility in the SKILL.md frontmatter.

Context cost

Msagljs loads about 1.2k tokens when it runs, and up to ~5.8k if it reads all its reference files. Until then it costs about 86 tokens; SKILL.md has 519 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~86
When it runs · the whole SKILL.md, loaded when a task matches: ~1.2k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~5.8k

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

The full file from microsoft/msagljs at commit 33098ff, republished under its MIT licence (© microsoft). 519 words, ~1,176 tokens.

Download SKILL.mdSave it as .claude/skills/msagljs/SKILL.md (or your agent's skills folder). This skill also uses 20 other files; get the full folder from GitHub.

name: msagljs
description: Use MSAGL-JS (Microsoft Automatic Graph Layout) to lay out and visualize networks in JavaScript or TypeScript. Use for graph and network layout, DOT/JSON/JGF parsing, live embedded SVG or WebGL graphs, Sugiyama/MDS/IPSepCola layouts, edge routing, and exporting SVG, PDF, PNG, EPS, or PostScript figures for LaTeX and other documents.
compatibility: JavaScript or TypeScript. Browser APIs are required for SVG/WebGL rendering. The static export helper requires Node.js 20+ and optionally Ghostscript for EPS or PostScript.
license: MIT
metadata.author: Microsoft
metadata.source: https://github.com/microsoft/msagljs

MSAGL-JS

Use this skill to add automatic graph layout or network visualization with the @msagl/* packages.

Choose the workflow

Goal	Workflow
Compute node positions and routed edge curves without a viewer	Core layout
Embed an interactive graph that appears when a page loads	Live web embedding
Add or configure the SVG or WebGL renderer	Browser renderers
Select a layout algorithm or edge-routing mode	Layout and routing
Generate SVG, PDF, PNG, EPS, or PostScript for a document	Document export
Choose packages or parse graph inputs	Packages and inputs
Diagnose an integration problem	Troubleshooting

Required process

Inspect the target project's package manager, framework, runtime, and existing build or test commands.
Determine whether the result should be core geometry, a live SVG viewer, a live WebGL viewer, or a static document figure.
Identify the graph source: programmatic nodes and edges, inline DOT/JSON, a local graph file, or an API response.
Install every @msagl/* package imported directly by the code. Do not rely on transitive dependencies.
Select the layout and routing based on graph direction, graph size, and the desired visual style.
Implement the matching workflow using public package exports.
Validate with the target project's existing typecheck, build, tests, or a browser smoke test. Confirm the output is visibly non-empty.

Invariants

new Edge(source, target) registers the edge with both endpoint nodes. Do not invent a separate addEdge call.
Add every node to its Graph.
Direct core layout requires a GeomGraph, a GeomNode with a boundary curve for each node, and a GeomEdge for each edge before layoutGeomGraph.
RendererSvg.setGraph() is synchronous. WebGL Renderer.setGraph() is asynchronous and must be awaited.
Browser renderers require window, document, canvas text measurement, and a mounted container with nonzero dimensions. Do not run them during SSR.
Pass a dedicated container to a renderer. Do not rely on its document.body default in an embedded application.
Retain one renderer instance per mounted container and update it with setGraph() or setOptions(). Do not reconstruct it on every framework render.
Omit layoutType to use the renderer default. The string 'default' is not a valid LayoutOptions.layoutType.
Use only public package exports, not internal source paths.
Preserve the textual graph source when generating PDF, EPS, or PostScript. The binary figure should not be the only editable artifact.

Show full SKILL.md (142 more words)Show less

Static export helper

For a repository without an existing browser application, install the helper's locked dependencies from this skill directory:

bash

npm ci --prefix scripts

Then render a graph:

bash

node scripts/render-network.mjs examples/network.dot figures/network.pdf \
  --layout sugiyama-lr \
  --routing spline

The output extension selects svg, pdf, png, eps, or ps. PDF is the default choice for pdfLaTeX, LuaLaTeX, and XeLaTeX. EPS is intended for legacy LaTeX-to-DVI-to-PostScript workflows.

Do not pre-approve shell execution for this skill. Let the agent host apply its normal permission policy before installing dependencies or running commands.

Completion criteria

The graph input is retained or generated in a reviewable text format.
The selected packages, layout, routing, and renderer match the use case.
Live viewers show loading and error states and render after their container is mounted.
Static outputs use vector SVG/PDF/EPS unless raster output was requested.
Generated code compiles, and the resulting graph or document asset has been opened or otherwise checked for non-empty output.

Files

SKILL.md and 20 other files (scripts, references) in skills/msagljs of microsoft/msagljs.

SKILL.md
examples/core-layout.ts
examples/latex-figure.tex
examples/live-page.html
examples/live-svg-page.ts
examples/live-webgl-page.ts
examples/network.dot
examples/network.jgf
examples/network.json
examples/network.txt
references/browser-renderers.md
references/core-layout.md
references/document-export.md
references/layout-and-routing.md
references/live-web-embedding.md
references/packages-and-inputs.md
references/troubleshooting.md
scripts/package-lock.json
… and 3 more

Open the folder on GitHubat commit 33098ff

Compare with similar skills

Msagljs 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.

Msagljs compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Msagljs this skillmicrosoft/msagljs	174	—	~1.2k	Automated safety check: Pass	MIT	5 days ago
Blender 3DGTKottman/mortiflix-oss	201	—	~902	Automated safety check: Pass	AGPL-3.0	today
Fog Of War JS TSpproenca/dot-skills	214	—	~2.2k	Automated safety check: Pass	MIT	1 mo ago
Javascript Testing Expertsoftmaple/softmaple	159	1 repos	~4k	Automated safety check: Pass	Apache-2.0	today
Manim Community Edition Best Practicesadithya-s-k/manim_skill	1.1k	2 repos	~1.5k	Automated safety check: Pass	MIT	8 mo ago
Mathmodel SkillhandsomeZR-netizen/mathmodel-skill	292	—	~2.5k	Automated safety check: Pass	MIT	11 days ago

Similar skills

Blender 3D
GTKottman/mortiflix-oss
3D work in the studio's own Blender with its toolkits: MoBlend (MoGraph cloners, effectors, fields, MoText, fracture), Nova FX (particles, fire, sparks, fireworks), Camera (framing, shot presets…
201 GitHub stars~902 tokensUpdated today
Documents & OfficeAuto-check passed
Fog Of War JS TS
pproenca/dot-skills
Fog of war, field of view, line of sight, and tile visibility in JavaScript or TypeScript games — roguelikes, RTS, top-down, or strategy maps.
214 GitHub stars~2.2k tokensUpdated 1 mo ago
Game DevelopmentAuto-check passed
Javascript Testing Expert
softmaple/softmaple
Expert-level JavaScript testing skill focused on writing high-quality tests that find bugs, serve as documentation, and prevent regressions.
159 GitHub starsUsed in 1 repo~4k tokens
Testing & QAAuto-check passed
Manim Community Edition Best Practices
adithya-s-k/manim_skill
Index of best-practice rule files and working examples for Manim Community Edition, covering scenes, animations, LaTeX math, 3D, camera control and styling.
1.1k GitHub starsUsed in 2 repos~1.5k tokens
Documents & OfficeAuto-check passed
Mathmodel Skill
handsomeZR-netizen/mathmodel-skill
CUMCM 国赛、MCM/ICM 美赛与电工杯数学建模竞赛的端到端协作工作流。Use when a user explicitly works on one of these modeling contests or asks to run/review a modeling-competition paper from problem selection through modeling…
292 GitHub stars~2.5k tokensUpdated 11 days ago
Documents & OfficeAuto-check passed
Lov Any2pdf
lovstudio/any2pdf
Convert Markdown documents to professionally typeset PDF files with reportlab.
211 GitHub stars~2.4k tokensUpdated 1 mo ago
Documents & OfficeAuto-check: notes

Works with

Questions about Msagljs

What does Msagljs do?

Use MSAGL-JS (Microsoft Automatic Graph Layout) to lay out and visualize networks in JavaScript or TypeScript. Msagljs is an agent skill from microsoft/msagljs, published by the product's own GitHub organization. Use MSAGL-JS (Microsoft Automatic Graph Layout) to lay out and visualize networks in JavaScript or TypeScript.

When should I use Msagljs?

Msagljs fits situations like: graph and network layout; DOT/JSON/JGF parsing; live embedded SVG; sugiyama/MDS/IPSepCola layouts.

How do I install Msagljs in Claude Code?

Run `npx skills add microsoft/msagljs --skill msagljs -a claude-code`. Or copy the skill folder (skills/msagljs in microsoft/msagljs) into .claude/skills/msagljs in your project. Claude Code loads it when a task matches its description.

How do I install Msagljs in Codex?

Run `npx skills add microsoft/msagljs --skill msagljs -a codex`. Or copy the skill folder (skills/msagljs in microsoft/msagljs) into .agents/skills/msagljs in your project. Codex loads it when a task matches its description.

Can I use Msagljs 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 microsoft/msagljs --skill msagljs -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/msagljs, .gemini/skills/msagljs, .github/skills/msagljs and .opencode/skills/msagljs in your project.

What does Msagljs need to run?

Going by SKILL.md and its folder, Msagljs needs TypeScript for the scripts in its folder and the command-line tools its instructions call (npm and node). Our summary lists: Node.js. Compatibility (from SKILL.md): JavaScript or TypeScript. Browser APIs are required for SVG/WebGL rendering. The static export helper requires Node.js 20+ and optionally Ghostscript for EPS or PostScript..

Does Msagljs access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Msagljs 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 Msagljs use?

Msagljs is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Msagljs use?

About 1.2k tokens (SKILL.md is roughly 4.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 4.7k tokens, read only when the agent opens those files.

What are the alternatives to Msagljs?

Skills that share tags, products or a category with Msagljs: Blender 3D (GTKottman/mortiflix-oss, 201 stars), Fog Of War JS TS (pproenca/dot-skills, 214 stars), Javascript Testing Expert (softmaple/softmaple, 159 stars) and Manim Community Edition Best Practices (adithya-s-k/manim_skill, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Msagljs?

microsoft (a GitHub organization, an official publisher) maintains it in microsoft/msagljs, which has 174 GitHub stars. The repository was last updated on October 2, 2026.

Source: microsoft/msagljs on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Msagljs

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Compatibility

Context cost

Safety

SKILL.md

MSAGL-JS

Choose the workflow

Required process

Invariants

Static export helper

Completion criteria

Files

Compare with similar skills

Similar skills

Blender 3D

Fog Of War JS TS

Javascript Testing Expert

Manim Community Edition Best Practices

Mathmodel Skill

Lov Any2pdf

Related

Questions about Msagljs