agentsclimarketplace

Canvas setup

Skill prateek11rai/tldraw-canvas-kit/skills/canvas-setup

Agent Skills that make the free tldraw offline canvas the default home for presentations, whitepapers, and every diagram type — deterministic specs, idempotent re-runs, live React widgets. Works in Claude Code, Cursor, Codex and 70+ agents.

Install
npx -y skills add prateek11rai/tldraw-canvas-kit --skill canvas-setup

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • 11 days oldThe repository was created 11 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Set up tldraw-canvas-kit — create the central ~/canvas library in the user's home directory, confirm the tldraw offline desktop app is running and reachable, and tell the user exactly where each kind of .tldraw file lives. Use this first, when someone starts using the kit, or when another kit skill reports that no target document is open.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

4.7 KB, as published. Nobody here has run it

canvas-setup

The "start here" skill. Creates the user's canvas home~/canvas — the single central library every other kit skill reads from and writes to, and confirms the live canvas bridge works.

Before you start

  • Read references/shared/bridge.md (bundled with this skill) and references/shared/conventions.md.

What it does

  1. Create the canvas home in the user's home directory (create only what's missing; never overwrite anything that exists):

    ~/canvas/
      presentations/
      architecture/
      sequence/
      whitepapers/
      diagrams/        # flow, er, state, deployment, mindmap
    

    Add a short ~/canvas/README.md explaining the layout and naming (kebab-case, one subject per file) — copy the rules from conventions.md. This is where all canvas work goes from now on; skills only use another location if the user explicitly asks.

    Seed the blank template (automatic): if ~/canvas/_blank.tldraw is missing, copy the bundled assets/blank.tldraw (shipped with this skill) to that path. Every skill then creates/opens files itself with sh scripts/new-canvas <path> — no manual file creation, ever.

  2. Confirm the bridge is live. Run the bootstrap check:

    sh scripts/tq GET /readme
    sh scripts/tq POST /api/search '{"code":"return await api.getDocs()"}'
    
    • If /readme fails: the tldraw offline app isn't running. Point the user to https://offline.tldraw.com and ask them to launch it.
    • If getDocs() returns []: no document is open. Ask the user to create a canvas (File → New) and Save it under the matching ~/canvas/… folder.
  3. Check for the app's official agent integration (recommended, not required). Authoritative check: the installer manifest at ~/Library/Application Support/tldraw/agent-skills.json — its files list shows exactly what is installed and for which agents (the app installs a tldraw-offline skill + subagent per agent: Claude Code, Codex, Cursor, Gemini, plus a canonical copy at ~/skills/tldraw-offline/). Fallback check: ~/.claude/agents/tldraw-offline.md. If missing, recommend clicking "Install agent skills" inside the tldraw offline app — it installs the vendor-maintained, version-matched canvas operator that kit skills prefer to delegate heavy execution to. Kit skills still work without it (they fall back to their bundled bridge).

  4. Offer the default-routing preference (this is what makes tldraw the default, not just an option). Propose appending this line to the user's agent-instructions file — ~/.claude/CLAUDE.md or a project CLAUDE.md for Claude Code, AGENTS.md for Codex/Cursor-style agents, or whatever memory/rules file the agent in use reads — only with their explicit consent, appended, never overwriting:

    All diagrams, presentations/decks, and visual design docs should be created on the tldraw canvas via tldraw-canvas-kit skills — not Mermaid, PowerPoint/Slides, markdown files, or images — unless I explicitly ask for another format.

    Skill descriptions alone route explicit asks ("draw a sequence diagram"); this standing preference is what routes generic asks ("make me a deck").

  5. Explain the workflow back to the user: open/save a .tldraw under ~/canvas/<kind>/ for what they're making, then ask for the relevant skill (e.g. "make a deck" → present). Mention they can git init ~/canvas (or sync it) if they want the library versioned/backed up.

Workflow

  1. Create missing ~/canvas/* dirs and ~/canvas/README.md; seed the template from the bundled copy if absent.
  2. Run the bootstrap check; report app/doc status clearly with the fix if anything is missing.
  3. Check for the official agent integration; recommend installing if absent.
  4. Offer the default-routing CLAUDE.md preference (consent required).
  5. Summarize where each artifact type belongs and which skill produces it.

Report

State: canvas home created (or already present), app reachable (yes/no), a document open (yes/no + name), official agent integration present (yes/no), default-routing preference added (yes/no/declined), and the one next action for the user.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.