Canvas widget

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

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-widget

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

Add an interactive or animated element (a widget) to any tldraw offline canvas — presentations, diagrams, dashboards, or free canvases. Spinning globes, live charts, clocks, timers, counters, particle effects, clickable buttons, small app-like embeds. Use whenever the user wants motion, interactivity, or an embedded live element on a canvas or inside a slide, even if tldraw isn't mentioned; widgets install as durable document scripts, so the behavior travels with the .tldraw file.

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

2.9 KB, as published. Nobody here has run it

canvas-widget

Make any canvas live. A widget is shapes + a document script: animation via the editor's tick loop, interactivity via pointer events or real React DOM. This skill is research-driven — the mechanics below are fixed; the widget's content (what a globe, chart, or gauge looks like) comes from the best reference implementation you can find.

Before you start

Read references/shared/bridge.md, references/shared/style.md, references/shared/research.md (bundled with this skill).
Read ./reference.md — the three widget tiers and their contracts.
Read the live recipes for whichever tier you use: api.recipes['animation-simulation-loop'], ['clickable-card-or-button-ui'], ['custom-shape-config-js'], ['custom-overlay-config-js'] — the live app's /readme and api.recipes outrank these notes on newer app versions.

Workflow

Pick the tier (see ./reference.md): shape choreography (tier 1), React shape via ShapeUtil (tier 2), or overlay paint (tier 3). Prefer the lowest tier that does the job — tier-1 widgets are plain shapes: exportable, theme-native, editable by the user.
Research the reference per references/shared/research.md: find the canonical implementation of the visual/algorithm (tldraw.dev/examples, D3 gallery, MDN, CodePen…), then port it into kit conventions — theme palette, meta:{kckit:'widget', key} tags, style tokens.
Build the shapes idempotently (stable ids, geometry constants the script needs stored in meta at build time).
Install the script via POST /api/doc/:id/script-workspace:
- Deck built by present: add widgets.js exporting initWidgets({editor, signal}) — the deck's main.js auto-loads it.
- Any other canvas: if isDefaultScript, write the minimal host main.js from ./templates/ plus your widgets.js; if a script already exists, extend it — never clobber.
- Tier 2 additionally registers the ShapeUtil in config.js. Poll script-status until state:"applied".
Verify once (tier-specific one-shot checks in ./reference.md), screenshot for the visual, and remind the user to Cmd+S (saving is human-only).

Report

Doc id/name, widget key(s), tier used, reference source ported from, script-status state, verification result.