Dotcanvas
DocumentsdotcanvasDotcanvas is an Agent Skill for documents published in the gridaco/grida repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.
Author and edit a Grida `.canvas` board — a `.canvas.json` manifest plus document files (references, generated images, notes) placed on an infinite canvas. Use when working on a `.canvas` bundle or arranging visuals/design work spatially. For a linear deck/presentation, use the `slides` skill instead.
How to use this skill
Bring this guide into your coding agent with a prompt tailored to the tool you use.
- Open your project in Codex.
- Copy and paste the prompt below.
- Review files and risks before approving any action.
Inspect the Agent Skill at https://github.com/gridaco/grida/blob/HEAD/skills/dotcanvas/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/dotcanvas, but wait for my approval before writing files or running scripts.
Copying this prompt does not install or run the skill. Review third-party files before use.
A .canvas is a Grida design board — a directory bundle, not a single
file. You work it like any other files: with read_file / write_file /
edit_file (no special canvas tool). It is the durable, spatial home for a
piece of work: reference images, generated outputs, and notes, arranged on an
infinite canvas. Prefer a .canvas board for freeform visual/design work; for
a linear deck / presentation / pitch / slideshow, use the slides skill.
Structure
- The bundle is a folder whose name ends in
.canvas(e.g.poster.canvas/). .canvas.json(the manifest) holds the STRUCTURE: which documents are on the board, their placement, order, and theeditormode.- Each document's CONTENT is a separate file (or a URL) referenced by its
src. - Manifest shape (only
srcis required per document):{ "editor": "board", "documents": [ { "src": "https://…/ref.jpg", "id": "ref1", "layout": { "x": 0, "y": 0, "w": 480, "h": 320 } }, { "src": "outputs/hero.png", "id": "hero", "layout": { "x": 520, "y": 0, "w": 768, "h": 512 } } ] } editor: "board"= freeform infinite canvas (placement vialayout).editor: "slides"= linear deck (order) — see theslidesskill.layoutis{ x, y, w, h, z? }in world space (z = paint order, optional). A document with nolayoutis unplaced — the host positions it; set alayoutto place it deliberately.
Working pattern
- To start, make the bundle folder first — a NEW directory whose name ends
in
.canvas(e.g.poster.canvas/); a plain folder, or files loose in the workspace root, is NOT a board and won't open. Thenwrite_fileits.canvas.jsonand each document file INSIDE that folder. To add to an existing board,read_file.canvas.jsonfirst (preserveversion/$schema/editorand any unknown fields), then write the FULL updated manifest back. - A document's
srcmay be a URL (a pointable reference — a picked library image, used as-is, no download) OR a file path inside the bundle. Both are first-class placed documents. - To place a generated image (or any produced file) on the board:
materialize it into the bundle, then reference it. Copy it from your
scratch dir into the bundle with the shell — e.g.
cp <scratch>/image-….png <board>.canvas/outputs/hero.png— then add a document whosesrcis that bundle-relative path. (Asrccan point at any file the host can read, but a file inside the bundle is the durable, portable choice.) - To move / resize / reorder, edit the
layout(and document order) in the manifest. The human can also drag pins directly — re-read.canvas.jsonbefore editing so you don't clobber their changes (last write per file wins).