SVG Diagram — Data skill for Claude Code

svg-diagram

A house style for hand-written SVG diagrams your agent can follow — the layout arithmetic, the colour system, and a zero-dependency linter that proves it did.

[](LICENSE) [](https://github.com/vercel-labs/skills) [](#the-lint-gate)


Install

Paste this to your coding agent:

Install the svg-diagram skill from https://github.com/bybit-exchange/svg-diagram
for me by running: npx skills add bybit-exchange/svg-diagram -g

Or run it yourself:

npx skills add bybit-exchange/svg-diagram -g

The CLI detects which agents you have installed and writes each one's path. Drop `-g` to install into the current project instead.

Surface	Path
Claude Code	~/.claude/skills/svg-diagram/
Codex, Cursor, Gemini CLI, Copilot, opencode, Antigravity	~/.agents/skills/svg-diagram/ — they share one directory
Pi	~/.pi/skills/svg-diagram/
Windsurf, Continue, Roo, Goose, Kiro, Trae and 40+ more	~/./skills/svg-diagram/
Claude.ai	Zip the folder and upload it under Settings → Capabilities → Skills (skill text only — svg-lint needs local Node)

Every path is named from the skill's frontmatter `name`, not from where the skill sits here, so moving files in this repository doesn't change them.

`SKILL.md` is at the repository root, so the install copies the root and `svg-lint` comes along with the skill text. The linter has no dependencies, so it runs from wherever it landed:

node ~/.claude/skills/svg-diagram/tools/svg-lint/bin/svg-lint.mjs diagram.svg

If you only want the skill text, take the one file the agent reads:

mkdir -p ~/.claude/skills/svg-diagram