Tldraw
Read, create, and edit tldraw .tldr canvas files deterministically — sketch hand-drawn-register diagrams (boxes, arrows, sticky notes, frames, text) directly into a canvas file the user opens in any tldraw surface, and read a rough canvas back as structured data to organize it. USE WHEN tldraw, .tldr file, whiteboard, canvas, sketch a diagram, hand-drawn diagram, draw this on a canvas, put this on the whiteboard, structure my canvas, organize my whiteboard, read my canvas, cluster my sticky notes. NOT FOR polished static images, infographics, or mermaid diagrams (use Art), web UI design (use Webdesign), programmatic video (use Remotion).
Install
git clone https://github.com/danielmiessler/LifeOS /tmp/LifeOS && ln -s /tmp/LifeOS/LifeOS/install/skills/Tldraw ~/.claude/skills/TldrawFrom README
Tldraw Deterministic read/write for tldraw canvases. The .tldr format is plain JSON ({tldrawFileFormatVersion: 1, schema, records}); Tools/Tldr.ts writes records that pass tldraw's own validator, so generated files open cleanly in the tldraw web editor, the VS Code tldraw extension, or the desktop app. Two directions: model → canvas (sketch diagrams) and canvas → model (read and structure a human's rough thinking). Customization Before executing, check for user customizations at: /.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Tldraw/ If this directory exists, load and apply any PREFERENCES.md found there (default canvas directory, preferred colors/register, default open surface). If not, proceed with defaults.
More from this repo
Art
Static visual content across 20+ formats — diagrams, mermaid, infographics, D3 dashboards, comics, icons, wallpaper —...
ApertureOscillation
3-pass scope oscillation that holds a question constant while shifting zoom — narrow/tactical, wide/strategic, then...
Remotion
Creates programmatic video with React via Remotion — compositions, sequences, and motion graphics animated with...