agentsclimarketplace
Sign in

Canvas widget

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

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.From its SKILL.md

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.

One thing to look at

  • 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 file declares

Copied from the file, not written here

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, 601 tokens by cl100k_base, 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

  1. 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.
  2. 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.
  3. Build the shapes idempotently (stable ids, geometry constants the script needs stored in meta at build time).
  4. 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".
  5. 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.

What ships with it: 13 files

83.9 KB alongside SKILL.md, 5 of them executable

assets/

references/

scripts/

templates/

Keep looking

Skills are one crate of 325,949. 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.