Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

JSON Canvas Skill · guanyang | DecimalAI

documentationby guanyang

JSON Canvas Skill

guanyang/json-canvas

Source guanyang/open-agent-hub ↗License MIT

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections.

SkillScore95Maintained

Automatic

Knowledge Management pack

Last verified 8/2/2026

What it changes

Passed 21 of 22 test cases with the skill, and 19 of 22 without it.

Without skill86%

With skill95%

Checks it passed that the model alone missed

All node and edge identifiers are 16-character lowercase hexadecimal strings.
Every node and edge object uses a 16-character hexadecimal string for its id property.

2 fixed19 passed either way1 still failing0 broke

Pass-rate lift: +9 pp
Tokens: +210%
Agent turns: 0%
Response time: -12%

Model gemini-3.6-flashMeasured 8/2/2026v121 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/guanyang-json-canvas/SKILL.md https://app.decimal.ai/s/guanyang-json-canvas/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add guanyang-json-canvas, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/guanyang-json-canvas/ and pins it in .decimal/skills.lock

decimalai skills add guanyang-json-canvas

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/guanyang-json-canvas/SKILL.md https://app.decimal.ai/s/guanyang-json-canvas/SKILL.md

Raw file: /s/guanyang-json-canvas/SKILL.md ↗ · machine-readable summary at /s/guanyang-json-canvas.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 2

Prompt

I need a canvas file formatted for JSON Canvas to map out my product launch workflow. Create a canvas structure containing a main header text card, a link node pointing to our team wiki at 'https://internal.wiki/launch-plan', a file node referencing 'Docs/architecture.png', and group them under a container labeled 'Launch Checklist'. Include connecting lines between the planning step and the reference nodes.

What was checked, without and with the skill
Checked	Without skill	With skill
Every node and edge object uses a 16-character hexadecimal string for its id property.	Missed	Passed
The group container node has its type property set to group.	Passed	Passed
The text card node has its type property set to text.	Passed	Passed

case-01 · gemini-3.6-flash · 8/2/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md239 lines2 files

JSON Canvas Skill

File Structure

A canvas file (.canvas) contains two top-level arrays following the JSON Canvas Spec 1.0:

{
  "nodes": [],
  "edges": []
}

nodes (optional): Array of node objects
edges (optional): Array of edge objects connecting nodes

Common Workflows

1. Create a New Canvas

Create a .canvas file with the base structure {"nodes": [], "edges": []}
Generate unique 16-character hex IDs for each node (e.g., "6f0ad84f44ce9c17")
Add nodes with required fields: id, type, x, y, width, height
Add edges referencing valid node IDs via fromNode and toNode
Validate: Parse the JSON to confirm it is valid. Verify all fromNode/toNode values exist in the nodes array

2. Add a Node to an Existing Canvas

Read and parse the existing .canvas file
Generate a unique ID that does not collide with existing node or edge IDs
Choose position (x, y) that avoids overlapping existing nodes (leave 50-100px spacing)
Append the new node object to the nodes array
Optionally add edges connecting the new node to existing nodes
Validate: Confirm all IDs are unique and all edge references resolve to existing nodes

3. Connect Two Nodes

Identify the source and target node IDs
Generate a unique edge ID
Set fromNode and toNode to the source and target IDs

Track record

Benchmark

21 / 22

test cases passed, vs 19 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 7/31/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

guanyang / open-agent-hub

skills/json-canvas/SKILL.md

View on GitHub ↗

License MITImported 7/31/2026Version v1Bundled 1 file

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

JSON Canvas Skill

File Structure

Common Workflows

1. Create a New Canvas

2. Add a Node to an Existing Canvas

3. Connect Two Nodes

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills