Awesome-omni-skills json-canvas

JSON Canvas Skill workflow skill. Use this skill when the user needs 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 and the operator should preserve the upstream workflow, copied support files, and provenance before merging or handing off.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skills

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skills "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/json-canvas" ~/.claude/skills/diegosouzapw-awesome-omni-skills-json-canvas && rm -rf "$T"

manifest: skills/json-canvas/SKILL.md

JSON Canvas Skill

Overview

This public intake copy packages

plugins/antigravity-awesome-skills-claude/skills/json-canvas

from

https://github.com/sickn33/antigravity-awesome-skills

into the native Omni Skills editorial shape without hiding its origin.

Use it when the operator needs the upstream workflow, support files, and repository context to stay intact while the public validator and private enhancer continue their normal downstream flow.

This intake keeps the copied upstream files intact and uses

metadata.json

plus

ORIGIN.md

as the provenance anchor for review.

JSON Canvas Skill

Imported source sections that did not map cleanly to the public headings are still preserved below or in the support files. Notable imported sections: File Structure, Nodes, Edges, Colors, ID Generation, Validation Checklist.

When to Use This Skill

Use this section as the trigger filter. It should make the activation boundary explicit before the operator loads files, runs commands, or opens a pull request.

Use when creating or editing .canvas files for Obsidian.
Use for mind maps, flowcharts, visual note structures, or connected canvases.
Use when the user explicitly mentions JSON Canvas or Obsidian Canvas files.
Use when the request clearly matches the imported source intent: 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....
Use when the operator should preserve upstream workflow detail instead of rewriting the process from scratch.
Use when provenance needs to stay visible in the answer, PR, or review packet.

Operating Table

Situation	Start here	Why it matters
First-time use	`metadata.json`	Confirms repository, branch, commit, and imported path before touching the copied workflow
Provenance review	`ORIGIN.md`	Gives reviewers a plain-language audit trail for the imported source
Workflow execution	`references/EXAMPLES.md`	Starts with the smallest copied file that materially changes execution
Supporting context	`references/EXAMPLES.md`	Adds the next most relevant copied source file without loading the entire package
Handoff decision	`## Related Skills`	Helps the operator switch to a stronger native skill when the task drifts

Workflow

This workflow is intentionally editorial and operational at the same time. It keeps the imported source useful to the operator while still satisfying the public intake standards that feed the downstream enhancer flow.

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
Read and parse the existing .canvas file
Generate a unique ID that does not collide with existing node or edge IDs

Imported Workflow Notes

Imported: 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
Optionally set
```
fromSide
```
/
```
toSide
```
(top, right, bottom, left) for anchor points
Optionally set
```
label
```
for descriptive text on the edge
Append the edge to the
```
edges
```
array
Validate: Confirm both
```
fromNode
```
and
```
toNode
```
reference existing node IDs

4. Edit an Existing Canvas

Read and parse the
```
.canvas
```
file as JSON
Locate the target node or edge by
```
id
```
Modify the desired attributes (text, position, color, etc.)
Write the updated JSON back to the file
Validate: Re-check all ID uniqueness and edge reference integrity after editing

Imported: 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

Examples

Example 1: Ask for the upstream workflow directly

Use @json-canvas to handle <task>. Start from the copied upstream workflow, load only the files that change the outcome, and keep provenance visible in the answer.

Explanation: This is the safest starting point when the operator needs the imported workflow, but not the entire repository.

Example 2: Ask for a provenance-grounded review

Review @json-canvas against metadata.json and ORIGIN.md, then explain which copied upstream files you would load first and why.

Explanation: Use this before review or troubleshooting when you need a precise, auditable explanation of origin and file selection.

Example 3: Narrow the copied support files before execution

Use @json-canvas for <task>. Load only the copied references, examples, or scripts that change the outcome, and name the files explicitly before proceeding.

Explanation: This keeps the skill aligned with progressive disclosure instead of loading the whole copied package by default.

Example 4: Build a reviewer packet

Review @json-canvas using the copied upstream files plus provenance, then summarize any gaps before merge.

Explanation: This is useful when the PR is waiting for human review and you want a repeatable audit packet.

Imported Usage Notes

Imported: Complete Examples

See references/EXAMPLES.md for full canvas examples including mind maps, project boards, research canvases, and flowcharts.

Best Practices

Treat the generated public skill as a reviewable packaging layer around the upstream repository. The goal is to keep provenance explicit and load only the copied source material that materially improves execution.

Coordinates can be negative (canvas extends infinitely)
x increases right, y increases down; position is the top-left corner
Space nodes 50-100px apart; leave 20-50px padding inside groups
Align to grid (multiples of 10 or 20) for cleaner layouts
Node Type - Suggested Width - Suggested Height
Small text - 200-300 - 80-150
Medium text - 300-450 - 150-300

Imported Operating Notes

Imported: Layout Guidelines

Coordinates can be negative (canvas extends infinitely)
```
x
```
increases right,
```
y
```
increases down; position is the top-left corner
Space nodes 50-100px apart; leave 20-50px padding inside groups
Align to grid (multiples of 10 or 20) for cleaner layouts

Node Type	Suggested Width	Suggested Height
Small text	200-300	80-150
Medium text	300-450	150-300
Large text	400-600	300-500
File preview	300-500	200-400
Link preview	250-400	100-200

Troubleshooting

Problem: The operator skipped the imported context and answered too generically

Symptoms: The result ignores the upstream workflow in

plugins/antigravity-awesome-skills-claude/skills/json-canvas

, fails to mention provenance, or does not use any copied source files at all. Solution: Re-open

metadata.json

ORIGIN.md

, and the most relevant copied upstream files. Load only the files that materially change the answer, then restate the provenance before continuing.

Problem: The imported workflow feels incomplete during review

Symptoms: Reviewers can see the generated

SKILL.md

, but they cannot quickly tell which references, examples, or scripts matter for the current task. Solution: Point at the exact copied references, examples, scripts, or assets that justify the path you took. If the gap is still real, record it in the PR instead of hiding it.

Problem: The task drifted into a different specialization

Symptoms: The imported skill starts in the right place, but the work turns into debugging, architecture, design, security, or release orchestration that a native skill handles better. Solution: Use the related skills section to hand off deliberately. Keep the imported provenance visible so the next skill inherits the right context instead of starting blind.

Related Skills

```
@base
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.
```
@calc
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.
```
@draw
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.
```
@image-studio
```
- Use when the work is better handled by that native specialization after this imported skill establishes context.

Additional Resources

Use this support matrix and the linked files below as the operator packet for this imported skill. They should reflect real copied source material, not generic scaffolding.

Resource family	What it gives the reviewer	Example path
`references`	copied reference notes, guides, or background material from upstream	`references/EXAMPLES.md`
`examples`	worked examples or reusable prompts copied from upstream	`examples/n/a`
`scripts`	upstream helper scripts that change execution or validation	`scripts/n/a`
`agents`	routing or delegation notes that are genuinely part of the imported package	`agents/n/a`
`assets`	supporting assets or schemas copied from the source package	`assets/n/a`

Imported Reference Notes

Imported: References

Imported: Nodes

Nodes are objects placed on the canvas. Array order determines z-index: first node = bottom layer, last node = top layer.

Generic Node Attributes

Attribute	Required	Type	Description
`id`	Yes	string	Unique 16-char hex identifier
`type`	Yes	string	`text` , `file` , `link` , or `group`
`x`	Yes	integer	X position in pixels
`y`	Yes	integer	Y position in pixels
`width`	Yes	integer	Width in pixels
`height`	Yes	integer	Height in pixels
`color`	No	canvasColor	Preset `"1"` - `"6"` or hex (e.g., `"#FF0000"` )

Text Nodes

Attribute	Required	Type	Description
`text`	Yes	string	Plain text with Markdown syntax

{
  "id": "6f0ad84f44ce9c17",
  "type": "text",
  "x": 0,
  "y": 0,
  "width": 400,
  "height": 200,
  "text": "# Hello World\n\nThis is **Markdown** content."
}

Newline pitfall: Use

\n

for line breaks in JSON strings. Do not use the literal

\\n

-- Obsidian renders that as the characters

and

File Nodes

Attribute	Required	Type	Description
`file`	Yes	string	Path to file within the system
`subpath`	No	string	Link to heading or block (starts with `#` )

{
  "id": "a1b2c3d4e5f67890",
  "type": "file",
  "x": 500,
  "y": 0,
  "width": 400,
  "height": 300,
  "file": "Attachments/diagram.png"
}

Link Nodes

Attribute	Required	Type	Description
`url`	Yes	string	External URL

{
  "id": "c3d4e5f678901234",
  "type": "link",
  "x": 1000,
  "y": 0,
  "width": 400,
  "height": 200,
  "url": "https://obsidian.md"
}

Group Nodes

Groups are visual containers for organizing other nodes. Position child nodes inside the group's bounds.

Attribute Required Type Description

label

string

Text label for the group

background

string

Path to background image

backgroundStyle

string

cover

ratio

, or

repeat

{
  "id": "d4e5f6789012345a",
  "type": "group",
  "x": -50,
  "y": -50,
  "width": 1000,
  "height": 600,
  "label": "Project Overview",
  "color": "4"
}

Imported: Edges

Edges connect nodes via

fromNode

and

toNode

IDs.

Attribute	Required	Type	Default	Description
`id`	Yes	string	-	Unique identifier
`fromNode`	Yes	string	-	Source node ID
`fromSide`	No	string	-	`top` , `right` , `bottom` , or `left`
`fromEnd`	No	string	`none`	`none` or `arrow`
`toNode`	Yes	string	-	Target node ID
`toSide`	No	string	-	`top` , `right` , `bottom` , or `left`
`toEnd`	No	string	`arrow`	`none` or `arrow`
`color`	No	canvasColor	-	Line color
`label`	No	string	-	Text label

{
  "id": "0123456789abcdef",
  "fromNode": "6f0ad84f44ce9c17",
  "fromSide": "right",
  "toNode": "a1b2c3d4e5f67890",
  "toSide": "left",
  "toEnd": "arrow",
  "label": "leads to"
}

Imported: Colors

The

canvasColor

type accepts either a hex string or a preset number:

Preset	Color
`"1"`	Red
`"2"`	Orange
`"3"`	Yellow
`"4"`	Green
`"5"`	Cyan
`"6"`	Purple

Preset color values are intentionally undefined -- applications use their own brand colors.

Imported: ID Generation

Generate 16-character lowercase hexadecimal strings (64-bit random value):

"6f0ad84f44ce9c17"
"a3b2c1d0e9f8a7b6"

Imported: Validation Checklist

After creating or editing a canvas file, verify:

All
```
id
```
values are unique across both nodes and edges
Every
```
fromNode
```
and
```
toNode
```
references an existing node ID
Required fields are present for each node type (
```
text
```
for text nodes,
```
file
```
for file nodes,
```
url
```
for link nodes)
```
type
```
is one of:
```
text
```
,
```
file
```
,
```
link
```
,
```
group
```
```
fromSide
```
/
```
toSide
```
values are one of:
```
top
```
,
```
right
```
,
```
bottom
```
,
```
left
```
```
fromEnd
```
/
```
toEnd
```
values are one of:
```
none
```
,
```
arrow
```
Color presets are
```
"1"
```
through
```
"6"
```
or valid hex (e.g.,
```
"#FF0000"
```
)
JSON is valid and parseable

If validation fails, check for duplicate IDs, dangling edge references, or malformed JSON strings (especially unescaped newlines in text content).

Imported: Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.