Menu
Create and edit GemiHub .canvas files using JSON Canvas nodes, edges, groups, colors, and file/link references.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Author and maintain GemiHub .base compatibility files for filtered table, card, and list views over workspace files.
Agent Skills: bundles of custom instructions, reference material, and workflows for the AI agent.
Create GemiHub Dashboards (.dashboard files) — a grid of widgets that embed Bases views, folder card/table/kanban views, notes, web pages, and workflow output. Use when the user asks for a dashboard, a home/overview page, or to arrange .base views and data widgets in a grid.
Create and edit GemiHub Markdown notes using GFM, frontmatter, callouts, Mermaid diagrams, tables, task lists, and links.
Use when building or editing the user's webpage / website — static HTML pages, magic-link login pages, protected pages, workflow-based JSON APIs (web/api/*.yaml), publishing blog posts or announcements, wiring sheet/calendar/gmail data into pages, setting up sign-in, building contact/booking forms, or operating the admin side of an existing site. Triggering keywords include web/, gemihub.*, requireAuth, sheet-read/sheet-write, "公開する" / "サイトに追加" / "Webページ作成". Lean toward using this skill whenever the user wants to put something on their site or expose data as a JSON endpoint — even if they don't name a file under web/.
| name | canvas |
| description | Create and edit GemiHub .canvas files using JSON Canvas nodes, edges, groups, colors, and file/link references. |
Create and edit .canvas files for GemiHub. A canvas file is JSON with top-level nodes and edges arrays. Use this skill when the user asks for a canvas, visual map, mind map, diagram board, planning board, concept map, or .canvas file.
Always output valid JSON when creating or modifying a .canvas file.
{
"nodes": [],
"edges": []
}
Every node requires:
| Field | Type | Notes |
|---|---|---|
id | string | Unique 16-character lowercase hex string |
type | string | text, file, link, or group |
x | number | Top-left x coordinate |
y | number | Top-left y coordinate |
width | number | Node width |
height | number | Node height |
color | string | Optional preset "1" through "6" or hex color |
{
"id": "8a9b0c1d2e3f4a5b",
"type": "text",
"x": 0,
"y": 0,
"width": 320,
"height": 180,
"text": "# Main Idea\n\nShort Markdown content."
}
Text node content is Markdown. Use \n inside JSON strings for line breaks.
{
"id": "1a2b3c4d5e6f7a8b",
"type": "file",
"x": 400,
"y": 0,
"width": 320,
"height": 180,
"file": "notes/project.md"
}
Use workspace-relative paths for file. Optional subpath can point to a heading or block-like fragment.
{
"id": "2b3c4d5e6f7a8b9c",
"type": "link",
"x": 0,
"y": 260,
"width": 300,
"height": 120,
"url": "https://example.com"
}
{
"id": "3c4d5e6f7a8b9c0d",
"type": "group",
"x": -40,
"y": -40,
"width": 820,
"height": 300,
"label": "Phase 1",
"color": "4"
}
Optional group fields: label, background, backgroundStyle. backgroundStyle is cover, ratio, or repeat.
{
"id": "4d5e6f7a8b9c0d1e",
"fromNode": "8a9b0c1d2e3f4a5b",
"fromSide": "right",
"toNode": "1a2b3c4d5e6f7a8b",
"toSide": "left",
"toEnd": "arrow",
"label": "supports"
}
Edge fields:
| Field | Required | Notes |
|---|---|---|
id | yes | Unique 16-character lowercase hex string |
fromNode | yes | Source node ID |
toNode | yes | Target node ID |
fromSide | no | top, right, bottom, or left |
toSide | no | top, right, bottom, or left |
fromEnd | no | none or arrow |
toEnd | no | none or arrow; omitted behaves like arrow in the editor |
color | no | Preset or hex color |
label | no | Edge label |
| Value | Color |
|---|---|
"1" | Red |
"2" | Orange |
"3" | Yellow |
"4" | Green |
"5" | Cyan |
"6" | Purple |
x increases to the right; y increases downward.Before writing a .canvas file:
nodes and edges arrays.x, y, width, and height.type is text, file, link, or group.