Agent skill · Steph Ango (kepano)

JSON Canvas skill for Claude Code, Codex and Cursor

Creates and edits .canvas files with nodes, edges and groups for maps and flowcharts.

Communityname: json-canvas★ 50k (repo)pushed 2026-09-15MITSKILL.md on GitHubchecked 2026-11-07

What it does, in the publisher's words

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.

The description field of the SKILL.md. The agent reads only this at startup and decides from it when to load the full skill.

Install JSON Canvas

The skills CLI copies the skill into the folder of each agent you pick (Claude Code, Codex, Cursor, Copilot, Gemini CLI, OpenCode, Windsurf...). Add -g for all projects. Needs Node.js 22.20+. docs

npx skills add kepano/obsidian-skills --skill json-canvas

This repo is a plugin marketplace. Inside Claude Code, add it and install the plugin that holds the skill (obsidian), or copy only this skill into ~/.claude/skills. docs

/plugin marketplace add kepano/obsidian-skills
/plugin install <plugin>@obsidian-skills

# or only this skill:
npx skills add kepano/obsidian-skills --skill json-canvas -a claude-code

Download the skill folder, zip it, then Customize > Skills > + > Create skill > Upload a skill. Code execution must be on (Settings > Capabilities). docs

git clone --depth 1 https://github.com/kepano/obsidian-skills.git /tmp/json-canvas-src
cp -r /tmp/json-canvas-src/skills/json-canvas ./json-canvas
zip -r json-canvas.zip json-canvas

Codex reads skills from .agents/skills in the repo or ~/.agents/skills. Type $ in Codex to use one. docs

npx skills add kepano/obsidian-skills --skill json-canvas -a codex

gh skill (GitHub CLI 2.90+, preview) installs it for Copilot in VS Code, the CLI and the cloud agent. Copilot also reads .github/skills and ~/.copilot/skills. docs

gh skill install kepano/obsidian-skills json-canvas

Cursor reads .cursor/skills, .agents/skills and ~/.cursor/skills (and .claude/skills). It does not install loose skills from a GitHub URL, so copy it in. docs

npx skills add kepano/obsidian-skills --skill json-canvas -a cursor

Installs from the GitHub repo; --path picks this skill out of the repo. Default scope is user (all projects). docs

gemini skills install https://github.com/kepano/obsidian-skills.git --path skills/json-canvas

OpenCode reads .opencode/skills, ~/.config/opencode/skills and the Claude and .agents folders. docs

npx skills add kepano/obsidian-skills --skill json-canvas -a opencode

Windsurf (now Devin Desktop) reads .devin/skills, .windsurf/skills and ~/.codeium/windsurf/skills. docs

npx skills add kepano/obsidian-skills --skill json-canvas -a windsurf

Works with

Claude Code, Claude.ai and Claude Desktop, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and other agents that read the open Agent Skills format.

What's in the SKILL.md

19 sections

File Structure
Common Workflows
1. Create a New Canvas
2. Add a Node to an Existing Canvas
3. Connect Two Nodes
4. Edit an Existing Canvas
Nodes
Generic Node Attributes
Text Nodes
File Nodes
Link Nodes
Group Nodes
Edges
Colors
ID Generation
Layout Guidelines
Validation Checklist
Complete Examples
References

Bundled files

references/EXAMPLES.md

Loaded only when the instructions point to them.

Facts

Skill name: json-canvas
Publisher: Steph Ango (kepano) (community)
Repo: kepano/obsidian-skills
License: MIT
SKILL.md size: 1,079 words, 240 lines
Bundled files: 1, 1 docs
Repo stars: 50k (as of 2026-10-24)
SKILL.md checked: 2026-11-07

Pairs with the Obsidian MCP server: the server gives the agent the tools, the skill teaches it how to use them.

More skills from kepano/obsidian-skills

Obsidian Markdown: Writes Obsidian-flavored Markdown with wikilinks, embeds, callouts and properties.

Related writing & notes skills

Doc Co-authoring · Anthropic
PR Writer · Sentry

FAQ

What does the json-canvas skill do?+

Creates and edits .canvas files with nodes, edges and groups for maps and flowcharts. In its own SKILL.md, Steph Ango (kepano) describes it as: "Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian."

How do I install the json-canvas skill?+

Run npx skills add kepano/obsidian-skills --skill json-canvas and pick your agents, or use the tab for your agent above. In Claude Code the skill ends up in ~/.claude/skills/json-canvas/SKILL.md; in Codex and Cursor in .agents/skills/json-canvas/.

Does JSON Canvas work in Codex, Cursor and Copilot, or only Claude?+

It's a standard SKILL.md, so any agent that reads the Agent Skills format can use it: Claude Code, the Claude apps, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Windsurf and more.

Who maintains JSON Canvas?+

Steph Ango (kepano) (a community project), in the kepano/obsidian-skills repo on GitHub, last pushed 2026-09-15. License: MIT.

Read a skill's SKILL.md and scripts before you install it: skills aren't verified by any agent vendor. Claude skills marketplace · How to install skills · MCP servers