SKILLoptionalHermes Optional Skills

Tldraw Offline

Name: Tldraw Offline
Author: Teknium + Hermes Agent

Drive and script tldraw offline canvases with an agent

tldrawcanvaswhiteboarddocument-scriptdiagrammingOptionalHermes skill

Last registry verification2026-08-18v1.0.0Teknium + Hermes Agent

Open original source ↗اقرأ بالعربية

Plain meaning

What does it add to Hermes?

Drive and script tldraw offline canvases with an agent

Tldraw Offline is a skill related to files and documents. It can let the agent read, organize, or create documents within the folder or account scope you grant.

This plain-language explanation is based on the publisher description. The original text remains visible for verification.

Use it when

Use it when your goal in files and documents is clear and you can limit it to the data and actions it actually needs.

Skip it when

Do not add it merely to experiment when Hermes already has a simpler path, or when you cannot review its source and permissions.

Who is it for?

Best for users who want a repeatable way of working inside Hermes.

Safe first test

Use a test folder containing copies of non-sensitive files and begin with one read operation.

Original publisher description

Drive and script tldraw offline canvases with an agent

✓

Data source

This entry was indexed from Hermes Optional Skills. Our explanation interprets the type and domain without inventing a capability not present upstream.

Security review

The source is official or editorially reviewed, but you still need to review permissions and version compatibility.

Safe setup path

Inspect, install, then test.

01
Open the source
Match the publisher, license, and description to your need. Check the real update history.
02
Review permissions and secrets
Never paste a secret value into this site. Use environment-variable names and grant the smallest scope.
03
Copy setup only after review
The controls below copy text. They do not execute commands on your device.
04
Test with a non-sensitive task
Inspect the visible tools, then exclude write or delete tools you do not need.

Install command

Review the command, then copy it.

hermes skills install tldraw-offline

Hermes Belarabi does not execute this command. Installation happens on your device and remains subject to Hermes scanning and your review.

The full skill definition

Exactly what Hermes loads when this skill runs.

Reproduced from the official documentation. Read it before enabling the skill: this text becomes the agent's instructions.

Drive and script tldraw offline canvases with an agent.

Skill metadata

A lookup table. Do not read it all; find the row that applies to you.

Source	Optional — install with `hermes skills install official/creative/tldraw-offline`
Path	`optional-skills/creative/tldraw-offline`
Version	`1.0.0`
Author	Teknium + Hermes Agent
License	MIT
Platforms	linux, macos, windows
Tags	`tldraw`, `canvas`, `whiteboard`, `document-script`, `diagramming`

Reference: full SKILL.md

Explains the idea itself. Read it slowly; the later sections build on it.

Work with the tldraw offline desktop app (offline.tldraw.com): read the open canvas, make edits, and write document scripts — JavaScript embedded in a .tldraw file that runs on load and gives the file durable behavior. The app runs a local HTTP API (default localhost:7236) that a coding agent drives with plain curl from its terminal — this is exactly how the app's own homepage demo (Codex editing a canvas live) works. The agent does NOT use computer-use / GUI clicking, and does NOT hand-edit the .tldraw file directly. Keep tldraw offline open while you work.

When to Use

Explains the idea itself. Read it slowly; the later sections build on it.

The user has tldraw offline open and asks you to build or modify a canvas (diagrams, wireframes, layouts).
You want to add durable behavior to a drawing (reactive shapes, interactive buttons, animation, connection logic) via an embedded document script.

Do NOT hand-place shapes to imitate a drawing — write the code that generates them. Agents are far better at scripting the canvas than at drawing on it.

Prerequisites

Explains the idea itself. Read it slowly; the later sections build on it.

tldraw offline installed and running, with a document open. Releases: https://github.com/tldraw/tldraw-offline/releases/latest (macOS DMG, Windows x64/Arm64, Linux x86_64/arm64 AppImage or amd64/arm64 .deb).
Agent skills installed in the app: Develop → Install Agent Skills. The app writes its own tldraw skill into ~/.codex/skills/, ~/.claude/skills/, ~/.cursor/skills/, and ~/.gemini/skills/ — teaching that agent the curl recipes below. (This Hermes skill mirrors that guidance for Hermes.)
The local control API. On launch the app writes server.json to its config dir (Linux ~/.config/tldraw/, macOS ~/Library/Application Support/tldraw/, Windows %APPDATA%\tldraw\) with port (default 7236), a bearer token, pid, and startedAt. Every request except GET / needs Authorization: Bearer <token>. A clean quit removes server.json; if it's present but the port doesn't answer, the app quit uncleanly — treat as not running.
Re-read port + token on EVERY shell call. Each terminal call is a fresh shell, so an exported token does not persist — "export once and reuse" sends an empty token and 401s. Read both inline at the top of each call: PORT=$(jq -r .port <server.json>); TOKEN=$(jq -r .token <server.json>).
No account or network needed for local editing.

How to Run

Explains the idea itself. Read it slowly; the later sections build on it.

Two distinct workflows. Pick by whether the change must survive a reload.

A. One-off canvas edits (/exec) — layout, generating shapes, cleanup. This is a live edit, not saved script:

Shell10 lines

BASE=http://localhost:7236
TOKEN=$(python3 -c "import json;print(json.load(open('$HOME/.config/tldraw/server.json'))['token'])")
# find the focused document id
DOC=$(curl -s "$BASE/api/search" -X POST -H 'content-type: application/json' \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"code":"return (await api.getFocusedDoc()).id"}' | python3 -c "import sys,json;print(json.load(sys.stdin)['result'])")
# run code with the live `editor` + `helpers` in scope
curl -s "$BASE/api/doc/$DOC/exec" -X POST -H 'content-type: application/json' \
  -H "Authorization: Bearer $TOKEN" \
  -d '{"code":"const {createShapeId,toRichText}=await import(\"tldraw\"); editor.createShape({id:createShapeId(),type:\"geo\",x:0,y:0,props:{geo:\"rectangle\",w:200,h:100,color:\"blue\",fill:\"solid\",richText:toRichText(\"hello\")}}); return editor.getCurrentPageShapes().length"}'

B. Durable behavior (script/main.js) — reactive/interactive logic that must survive reload. Edit the file on disk; the app's watcher applies it:

Shell6 lines

# get the live script file path for the doc
curl -s "$BASE/api/doc/$DOC/script-workspace" -X POST \
  -H "Authorization: Bearer $TOKEN"          # -> result.mainJsPath, result.isDefaultScript
# edit result.mainJsPath with read_file / patch / write_file (see scripts/main.js)
# then confirm the watcher applied it:
curl -s "$BASE/api/doc/$DOC/script-status" -H "Authorization: Bearer $TOKEN"

The ready-to-adapt document script is scripts/main.js.

Quick Reference

Explains the idea itself. Read it slowly; the later sections build on it.

The document-script contract (verified against the app's bundled script-context.d.ts):

JavaScript33 lines




  set `delivery_mode: "foreground"` (pair with `bring_to_front`) and its X11 XTest
  path (`x11_xtest_fg`) clicks land — this dismisses the "Run Script" consent
  dialog and clicks the canvas. Verified by the Cua team on this exact v1.11.0
  AppImage (Linux/X11). Do NOT conclude "Electron rejects synthetic clicks" and
  give up in background mode — climb to foreground. (The real product path is
  still `/exec`, not clicks; this note is for computer-use-driven testing.)

The pattern:

```js

  `setInterval` keeps firing but Electron throttles it to ~1/s in the background.
- **The API needs the bearer token** from `server.json`; the port can be non-default
  (`server.listen(0)` picks one) — always read the file, don't hardcode `7236`.
- **Only `tldraw` / `react` / `react-dom` import** — not a Node project.

## Verification

- **Shape schema (offline, no app):** `node scripts/validate_shapes.mjs` — builds
  the real tldraw schema and validates note/text/frame. Passing prints `3/3`.
- **Live canvas edits:** after `/exec`, read back with `/api/search` →
  `api.getShapes(docId)` (returns `{ page, viewport, shapes }`) and
  `api.getBindings(docId)` (array). Confirm expected shapes/bindings exist. Grab
  `api.getScreenshot(docId)` (returns `{ filePath, ... }`) and inspect the PNG/JPEG
  with `vision_analyze`.
- **Durable script applied:** `GET /api/doc/:id/script-status`. Success is
  `state: "applied"` (`currentDiskDigest === lastAppliedDigest === manifestSha256`,
  `pendingApply === false`, `lastApplyError === null`). If it stays `"pending"`
  after a short retry, report that instead of claiming success; `"error"` means
  the apply failed — read `errorLogPath`.