Agent skill

Pneuma Draw

Create and edit visual content on the Excalidraw canvas in the Pneuma Draw workspace.

Install Pneuma Draw

skills CLI

$ npx skills add pandazki/pneuma-skills --skill pneuma-draw -a claude-code

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

GitHub CLI

$ gh skill install pandazki/pneuma-skills pneuma-draw --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/pandazki/pneuma-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/modes/draw/skill .claude/skills/pneuma-draw && 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 "pneuma-draw" agent skill from https://github.com/pandazki/pneuma-skills/tree/main/modes/draw/skill into .claude/skills/pneuma-draw/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pneuma-draw", 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/pandazki/pneuma-skills/tree/main/modes/draw/skill

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 pandazki/pneuma-skills --skill pneuma-draw -a codex

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

GitHub CLI

$ gh skill install pandazki/pneuma-skills pneuma-draw --agent codex

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

Manual copy

$ git clone --depth 1 https://github.com/pandazki/pneuma-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/modes/draw/skill .agents/skills/pneuma-draw && 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 "pneuma-draw" agent skill from https://github.com/pandazki/pneuma-skills/tree/main/modes/draw/skill into .agents/skills/pneuma-draw/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pneuma-draw", 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 pandazki/pneuma-skills --skill pneuma-draw -a cursor

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

GitHub CLI

$ gh skill install pandazki/pneuma-skills pneuma-draw --agent cursor

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

Manual copy

$ git clone --depth 1 https://github.com/pandazki/pneuma-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/modes/draw/skill .cursor/skills/pneuma-draw && 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 "pneuma-draw" agent skill from https://github.com/pandazki/pneuma-skills/tree/main/modes/draw/skill into .cursor/skills/pneuma-draw/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pneuma-draw", 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/pandazki/pneuma-skills.git --path modes/draw/skill

--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 pandazki/pneuma-skills --skill pneuma-draw -a gemini-cli

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

GitHub CLI

$ gh skill install pandazki/pneuma-skills pneuma-draw --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/pandazki/pneuma-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/modes/draw/skill .gemini/skills/pneuma-draw && 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 "pneuma-draw" agent skill from https://github.com/pandazki/pneuma-skills/tree/main/modes/draw/skill into .gemini/skills/pneuma-draw/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pneuma-draw", 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 pandazki/pneuma-skills pneuma-draw

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 pandazki/pneuma-skills --skill pneuma-draw -a github-copilot

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

Manual copy

$ git clone --depth 1 https://github.com/pandazki/pneuma-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/modes/draw/skill .github/skills/pneuma-draw && 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 "pneuma-draw" agent skill from https://github.com/pandazki/pneuma-skills/tree/main/modes/draw/skill into .github/skills/pneuma-draw/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pneuma-draw", 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 pandazki/pneuma-skills --skill pneuma-draw -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 pandazki/pneuma-skills pneuma-draw --agent opencode

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

Manual copy

$ git clone --depth 1 https://github.com/pandazki/pneuma-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/modes/draw/skill .opencode/skills/pneuma-draw && 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 "pneuma-draw" agent skill from https://github.com/pandazki/pneuma-skills/tree/main/modes/draw/skill into .opencode/skills/pneuma-draw/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pneuma-draw", 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: pneuma-draw
GitHub stars: 161
Token cost: ~1.7k tokens
SKILL.md length: 812 words
Files: 2 (incl. references)
Skills in repo: 30
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Create and edit visual content on the Excalidraw canvas in the Pneuma Draw workspace.

Works in 3 steps: Create shape elements (rectangles,… → Add text labels bound to each shape → Connect shapes with arrows using bindings
ANY task in this workspace
SKILL.md covers Credits, Working with the viewer, Core Rules and File Format, plus 6 more sections
Calls curl; reaches excalidraw.com

What it does

Pneuma Draw is an agent skill from pandazki/pneuma-skills. Create and edit visual content on the Excalidraw canvas in the Pneuma Draw workspace. Use for ANY task in this workspace. Defines the Excalidraw JSON format, element types, binding rules, and color palette.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/element-types.md`).

It sits in Frontend & Design, covering Diagrams and Theming and dark mode. It works with Excalidraw. The repository describes itself as: Co-creation infrastructure for humans and code agents — visual environment, skills, continuous learning, and distribution. The licence is MIT.

When your agent uses it

ANY task in this workspace
Tasks that involve Diagrams
Tasks that involve Theming and dark mode

Example prompts

“/pneuma-draw”

Workflow steps

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

Create shape elements (rectangles, diamonds) positioned in a grid
Add text labels bound to each shape
Connect shapes with arrows using bindings

What it can do on your machine

Read from SKILL.md and the folder at commit 0023d3c. 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
Shell commands in SKILL.md call:
- curl
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- excalidraw.com
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

Pneuma Draw loads about 1.7k tokens when it runs, and up to ~2.2k if it reads all its reference files. Until then it costs about 55 tokens; SKILL.md has 812 words of instructions outside code blocks.

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

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); files beside SKILL.md are not scanned.

SKILL.md

The full file from pandazki/pneuma-skills at commit 0023d3c, republished under its MIT licence (© pandazki). 812 words, ~1,676 tokens.

Download SKILL.mdSave it as .claude/skills/pneuma-draw/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: pneuma-draw
description: Create and edit visual content on the Excalidraw canvas in the Pneuma Draw workspace. Use for ANY task in this workspace. Defines the Excalidraw JSON format, element types, binding rules, and color palette.

Pneuma Draw Mode — Excalidraw Skill

You are an expert at creating and editing Excalidraw diagrams. The user sees your changes live on an Excalidraw canvas in their browser.

Credits

This mode uses Excalidraw — an open-source, MIT-licensed virtual whiteboard by the Excalidraw team.

Working with the viewer

The draw viewer is an Excalidraw canvas. It renders one .excalidraw JSON file at a time and streams what the user sees and does back into the conversation. Four channels matter for this mode:

Reading what the user sees

Each user turn arrives wrapped with a <viewer-context> block describing the current canvas state. For draw, it carries:

The active .excalidraw file path (the canvas only renders one file at a time).
The Excalidraw scene state — element ids, types, positions, and which elements are currently selected.
A <user-actions> sub-block listing direct manipulations the user performed since the last turn — drag, resize, move, or delete on individual shapes/arrows/text.

Read it before you edit. If the user dragged start-node 200px to the right, your next edit should preserve that new position rather than snap it back to the old layout.

ViewerAddress — naming an object in the canvas

A ViewerAddress is the one JSON object that names "which object in the viewer" — shared by locator cards, the capture action, navigation, and selection reports. Draw's address vocabulary:

Key	Granularity	Meaning
`file`	coarse	Workspace-relative path to the `.excalidraw` canvas file.
`elementId`	fine	Id of a single Excalidraw element (shape / arrow / text). Omit → the whole canvas.

Selection reports it on the Address: line inside <viewer-context> — copy it verbatim back into a locator card.

Locator cards

After creating or substantially updating a diagram, embed a <viewer-locator> card so the user can jump to it with one click. The address attribute is a ViewerAddress JSON object.

html

<viewer-locator address='{"file":"architecture.excalidraw"}'>Architecture diagram</viewer-locator>

For multi-file work (e.g. a system overview plus per-service detail diagrams), emit one card per file so the user can navigate between them.

Viewer actions

The viewer exposes one agent-callable action — scaffold — which resets the currently viewed .excalidraw file to an empty canvas. Use it when the user asks for a fresh start on the active diagram; do not use it to clear other files.

bash

curl -X POST "$PNEUMA_API/api/viewer/action" \
  -H "Content-Type: application/json" \
  -d '{"action":"scaffold","params":{}}'

After scaffold, write your new elements into the active file as a normal edit — the canvas re-renders from the JSON you produce.

Core Rules

Edit .excalidraw JSON files directly — the user sees updates in real-time on the canvas.
Ensure bidirectional binding on every connection: arrows reference shapes AND shapes reference arrows. If only one side is set, the connection breaks the moment the user drags or resizes.
Generate unique element ids and random seeds. Changing the IDs or seeds of existing elements causes visible flicker on the canvas.

File Format

Excalidraw files use .excalidraw extension and are JSON:

json

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [...],
  "appState": { "viewBackgroundColor": "#ffffff" },
  "files": {}
}

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

Element Types

Type	Extra Properties	Usage
`rectangle`	`roundness`	Boxes, containers, cards
`ellipse`	—	Circles, ovals, bubbles
`diamond`	—	Decision nodes, conditions
`line`	`points`, `startBinding`, `endBinding`	Lines, connectors
`arrow`	`points`, `startBinding`, `endBinding`	Directed connections
`text`	`text`, `fontSize`, `fontFamily`, `textAlign`	Labels, annotations
`freedraw`	`points`, `simulatePressure`	Freehand sketches
`image`	`fileId`, `status`	Embedded images
`frame`	—	Grouping frames

For full JSON schema of each type (common properties, text properties, line/arrow point arrays, binding mechanics), read {SKILL_PATH}/references/element-types.md.

Binding

Excalidraw requires bidirectional binding — if only the arrow references the shape but not vice versa, the connection breaks when the user interacts with the canvas. Always set both:

Arrow's startBinding/endBinding → references shape IDs
Shape's boundElements → references arrow ID

Same pattern for text inside shapes: shape's boundElements references the text, text's containerId references the shape.

Colors

Stroke Colors

#1e1e1e — Black (default)
#e03131 — Red
#2f9e44 — Green
#1971c2 — Blue
#f08c00 — Orange
#6741d9 — Purple

Background Colors

transparent — None (default)
#ffc9c9 — Light red
#b2f2bb — Light green
#a5d8ff — Light blue
#ffec99 — Light yellow
#d0bfff — Light purple

ID Generation

Each element needs a unique id. Use descriptive IDs like "start-node", "arrow-1", "label-process". The seed field should be a random integer — Excalidraw uses it for hand-drawn rendering variations, so different seeds give different "wobble" patterns.

Common Patterns

Flowchart

Create shape elements (rectangles, diamonds) positioned in a grid
Add text labels bound to each shape
Connect shapes with arrows using bindings

Wireframe

Use rectangles for containers and sections
Add text for labels and placeholder content
Use lines for dividers
Set roughness: 0 for clean wireframes — the hand-drawn look doesn't suit UI mockups

Mind Map

Central ellipse or rectangle
Lines/arrows radiating outward
Text labels at each node

Tips

Position elements on multiples of 20-40 — this aligns with Excalidraw's snap grid and produces clean diagrams
Keep 40-60px gaps between connected elements — tighter gaps make arrows hard to see, wider gaps waste canvas space
Use roundness: { "type": 3 } for rounded rectangles
Set roughness: 0 for clean/professional look, 1 for hand-drawn style
Always generate unique id values and random seed values
When modifying existing diagrams, preserve unchanged elements exactly — changing IDs or seeds causes visual flicker on the canvas

Files

SKILL.md and 1 other file (references) in modes/draw/skill of pandazki/pneuma-skills.

SKILL.md
references/element-types.md

Open the folder on GitHubat commit 0023d3c

Compare with similar skills

Pneuma Draw 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.

Pneuma Draw compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Pneuma Draw this skillpandazki/pneuma-skills	161	—	~1.7k	Automated safety check: Pass	MIT	2 days ago
Concept DiagramsTommy-yw/RunbookHermes	546	3 repos	~4.3k	Automated safety check: Pass	MIT	4 mo ago
SVG UI Templatesxjtulyc/MedgeClaw	617	1 repos	~522	Automated safety check: Pass	None	7 mo ago
Flowfile SVG DiagramsEdwardvaneechoud/Flowfile	385	—	~5.5k	Automated safety check: Pass	MIT	yesterday
Tech Diagramthatrebeccarae/claude-marketing	161	—	~1.1k	Automated safety check: Pass	MIT	4 mo ago
Diagram Designcathrynlavery/diagram-design	49k	1 repos	~7.6k	Automated safety check: Pass	MIT	today

Similar skills

Concept Diagrams
Tommy-yw/RunbookHermes
Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark…
546 GitHub starsUsed in 3 repos~4.3k tokens
Frontend & DesignAuto-check passed
SVG UI Templates
xjtulyc/MedgeClaw
Generate professional SVG UI panels for structured information display.
617 GitHub starsUsed in 1 repo~522 tokens
Frontend & DesignAuto-check passed
Flowfile SVG Diagrams
Edwardvaneechoud/Flowfile
How to author, wire, and verify the hand-drawn brand SVG diagrams on the Flowfile docs site — the exact file contract (viewBox, role + aria-label, defs→style→content), the shipped palette and…
385 GitHub stars~5.5k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Tech Diagram
thatrebeccarae/claude-marketing
Generate technical architecture diagrams, pipeline flows, layer/stack diagrams, and system illustrations as standalone HTML files.
161 GitHub stars~1.1k tokensUpdated 4 mo ago
Frontend & DesignAuto-check passed
Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
49k GitHub starsUsed in 1 repo~7.6k tokens
DevelopmentAuto-check passed
Architecture Map
almendili/skills
Build or update an interactive isometric map of a repository's architecture — buildings sized by real measurements, neighborhoods by subsystem, animated flows tracing actual call paths, and a drift…
382 GitHub starsUsed in 1 repo~2.3k tokens
Frontend & DesignAuto-check passed

Questions about Pneuma Draw

What does Pneuma Draw do?

Create and edit visual content on the Excalidraw canvas in the Pneuma Draw workspace. Pneuma Draw is an agent skill from pandazki/pneuma-skills. Create and edit visual content on the Excalidraw canvas in the Pneuma Draw workspace.

When should I use Pneuma Draw?

Pneuma Draw fits situations like: ANY task in this workspace; tasks that involve Diagrams; tasks that involve Theming and dark mode.

How do I install Pneuma Draw in Claude Code?

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

How do I install Pneuma Draw in Codex?

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

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

What does Pneuma Draw need to run?

Going by SKILL.md and its folder, Pneuma Draw needs the command-line tools its instructions call (curl).

Does Pneuma Draw access the network?

SKILL.md names 1 domain. In commands or code: excalidraw.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Pneuma Draw 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. Review the folder before installing.

What licence does Pneuma Draw use?

Pneuma Draw is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Pneuma Draw 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 563 tokens, read only when the agent opens those files.

What are the alternatives to Pneuma Draw?

Skills that share tags, products or a category with Pneuma Draw: Concept Diagrams (Tommy-yw/RunbookHermes, 546 stars), SVG UI Templates (xjtulyc/MedgeClaw, 617 stars), Flowfile SVG Diagrams (Edwardvaneechoud/Flowfile, 385 stars) and Tech Diagram (thatrebeccarae/claude-marketing, 161 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pneuma Draw?

pandazki (a GitHub user) maintains it in pandazki/pneuma-skills, which has 161 GitHub stars. The repository holds 30 skills in this directory. The repository was last updated on October 9, 2026.

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

Install Pneuma Draw

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Pneuma Draw Mode — Excalidraw Skill

Credits

Working with the viewer

Reading what the user sees

ViewerAddress — naming an object in the canvas

Locator cards

Viewer actions

Core Rules

File Format

Element Types

Binding

Colors

Stroke Colors

Background Colors

ID Generation

Common Patterns

Flowchart

Wireframe

Mind Map

Tips

Files

Compare with similar skills

Similar skills

More from pandazki/pneuma-skills

Related

Questions about Pneuma Draw