skills.rest
ruban-s
ruban-sCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Tldraw

Create, read, and edit tldraw .tldr canvas files as validated JSON records.

Updated Sep 3, 2026
Search Tags:#json#visualization#canvas#diagram#sketch#tldraw#whiteboard
One-click install
npx skills add https://github.com/ruban-s/DevOS --skill tldraw-ruban-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Tldraw
Source: https://github.com/ruban-s/DevOS/tree/main/skills/Tldraw
Command: npx skills add https://github.com/ruban-s/DevOS --skill tldraw-ruban-s

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Hand-authoring tldraw .tldr files is error-prone because raw records skip the editor's default fill-in and fail schema validation, while reading a messy human whiteboard back into structured data requires parsing ProseMirror richText and arrow bindings by hand. ## Core Features & Use Cases - Deterministic canvas writing: Create .tldr files and add boxes, ellipses, text, sticky notes, frames, and bound arrows via a spec JSON that clears tldraw's own validator (pinned to tldraw 5.2.5 schema). - Canvas reading and organizing: Inspect an existing board as structured JSON (shapes, text, positions, edges), then reseat shapes, add frames and arrows, and group scattered notes without altering user-authored text. - Use Case: Ask for a three-stage pipeline sketched as a hand-drawn diagram; the skill drafts a spec, runs Tldr.ts create/add/validate, and returns a .tldr file that opens cleanly in the VS Code tldraw extension, tldraw.com, or the desktop app. ## Quick Start Ask the agent to sketch your described diagram as a hand-drawn tldraw canvas and save it to a .tldr file you can open in any tldraw surface.

Frequently Asked Questions about Tldraw

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a tldraw diagram programmatically?▼

Run Tldr.ts with Bun: create a .tldr file, then add shapes via a JSON spec array supporting box, ellipse, text, note, frame, and arrow kinds. Finish with the validate command to confirm the file clears tldraw's schema checks.

How do I read a tldraw canvas file as structured data?▼

Use Tldr.ts inspect with the --json flag to get every shape's id, type, position, size, color, and plain-text label, plus edges derived from arrow bindings. This works on any v1 .tldr file without opening an editor.

Can I open generated .tldr files in VS Code or tldraw.com?▼

Yes. Generated files carry the pinned tldraw 5.2.5 schema snapshot, so they open in the official VS Code tldraw extension, tldraw.com via File > Open, and the desktop app. Newer tldraw versions migrate older schemas forward.

Why does my hand-written .tldr file fail tldraw validation?▼

Raw records skip the editor's default fill-in, so missing props like growY fail on load, labels must be ProseMirror richText JSON rather than bare strings, and arrow bindings require a terminal property of start or end. Route all edits through Tldr.ts instead of splicing records by hand.

What are the limitations of editing .tldr files directly?▼

The skill targets portable .tldr JSON, not the desktop app's native .tldraw zip format, and it cannot render or export images headlessly. Also, editing a file while it is open in an editor risks the in-memory copy clobbering the disk changes.

Related Skills

Explore More Design & Creative Skills→
fernandoxavier02fernandoxavier02

brainstorming

Guide teams through structured brainstorming to align goals and capture decisions.

Community
Advanced
SomtoUgehSomtoUgeh

technical-svg-diagrams

Generate technical SVG diagrams for architecture, flow, and component views.

Community
Basic
soq123soq123

infographic-builder

Generate static infographics from user data using AntV DSL templates.

Community
Advanced
neverpreparedneverprepared

image-to-diagram

Convert visual diagrams from images into Mermaid or Graphviz code.

Official
Intermediate