ワンクリックでManusで任意のスキルを実行

tldraw-export

スター0

フォーク0

更新日2026年7月18日 19:14

Renders a tldraw canvas or .tldr file to a static image — SVG, PNG, JPEG, or WebP — by driving tldraw's browser-based export APIs from a headless browser, producing a shareable picture from an editable canvas. Use this skill when the user says "export my tldraw file to PNG", "render this .tldr as an SVG", "turn my tldraw canvas into an image", or needs a flat image out of a tldraw document. Not for generating an editable .tldr from a description (see tldraw-diagram), converting Mermaid (see mermaid-to-tldraw), or exporting from the tldraw desktop app's own File menu.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

smithdak

smithdak/skillsmith

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

tldraw-export

tldraw can export a canvas to SVG, PNG, JPEG, or WebP. The catch that drives the whole design of this skill: the export APIs are browser-based and require a DOM — they measure and rasterize real rendered shapes, so they do not run in plain headless Node. Exporting programmatically therefore means driving a real browser (Playwright/Chromium) that loads the shapes and calls the export API.

If the user just wants a one-off image and already runs the tldraw desktop app or web editor, the fastest answer is the app's own Export menu — say so rather than building a pipeline. When the tldraw-offline agent skill is available, it can drive that desktop-app export directly; prefer it over a headless build for a single image. This skill is for scripted or repeatable exports where no app is running.

Set up the headless pipeline

Load the shapes into a real page. Mount a tldraw editor in a Playwright Chromium page, then loadSnapshot(editor.store, snapshot) from the .tldr (or use a canvas the user already has open). A DOM-less runtime will fail — this is the single most common mistake.
Choose the export call. Use the editor's export API to produce the image: an SVG string for vector output, or a rasterized blob for PNG/JPEG/WebP. Pass the shape ids to export (all shapes, or a selection) and options like background, padding, and scale.
Persist the bytes. Write the SVG string or the blob to the target path from the browser context (download or page.evaluate returning bytes).

See references/headless-export.md for the concrete Playwright + export-API recipe, format trade-offs, and gotchas.

Choose the format deliberately

SVG — vector, editable, smallest for diagrams; best default for docs.
PNG — lossless raster with transparency; use scale: 2 for crisp output.
JPEG — smaller, no transparency; only for photo-heavy canvases.
WebP — small raster where the target supports it.

Match the format to the destination (README, slide, print) instead of defaulting to PNG every time.

Verify before handing off

The output file exists, is non-empty, and opens as the claimed format.
All intended shapes are inside the frame — a cropped export usually means the export bounds or padding were wrong, not the shapes.
For raster output, confirm the resolution matches the requested scale.
Report the format, dimensions, and whether the whole canvas or a selection was exported.

このリポジトリの他の Skills

同じリポジトリ

op-github-secrets

smithdak/skillsmith

Wires GitHub Actions to pull secrets from 1Password at run time instead of storing long-lived copies in GitHub — using the 1Password load-secrets action with op:// references and a scoped service-account token, so CI reads secrets on demand and 1Password masks them in logs. Use this skill when the user says "load secrets from 1Password in GitHub Actions", "stop pasting secrets into GitHub repo settings", "use a 1Password service account in CI", or wants a workflow that resolves op:// references during a job. Not for local runtime injection (see op-secrets) or an interactive human setup script (see the wizard skill).

2026-07-180

op-secrets

smithdak/skillsmith

Moves a project's secrets out of plaintext and into 1Password secret references (op:// URIs) that resolve at runtime via the op CLI, producing a safe-to-commit .env template and an op run launch path so no real credential ever lands on disk. Use this skill when the user says "use 1Password for my env vars", "replace my .env secrets with op references", "set up op run for this project", "stop storing API keys in plaintext", or wants credentials injected from a 1Password vault at run time. Not for building an interactive service-setup script that captures values from a human (see the wizard skill), or for pushing secrets into GitHub Actions (see op-github-secrets).

2026-07-180

mermaid-to-tldraw

smithdak/skillsmith

Converts Mermaid diagram source into editable tldraw shapes using tldraw's official @tldraw/mermaid package, so a flowchart or graph written as Mermaid text becomes real, movable nodes and arrows on a tldraw canvas rather than a static image. Use this skill when the user says "convert this mermaid to tldraw", "turn my mermaid flowchart into editable tldraw shapes", "import mermaid into tldraw", or has Mermaid source they want as a hand-editable canvas. Not for authoring Mermaid text itself, rendering Mermaid to an image, or building a tldraw file from a prose description (see tldraw-diagram).

2026-07-180

tldraw-animation

smithdak/skillsmith

Adds motion to a tldraw canvas — animating shape position, rotation, and props over time with easing, animating the camera through a canvas, and authoring durable requestAnimationFrame loops embedded in a tldraw-offline document so the canvas keeps animating whenever it is opened. Use this skill when the user says "animate this tldraw diagram", "make these shapes move", "add an animation to my tldraw canvas", "create a tldraw animation loop", or "animate the camera through my board". Not for generating a static .tldr (see tldraw-diagram), exporting a canvas to an image (see tldraw-export), or CSS / web / video-file animation outside tldraw.

2026-07-180

tldraw-diagram

smithdak/skillsmith

Generates a tldraw canvas file (.tldr / .tldraw JSON) from a described diagram or outline — boxes, arrows, text, frames, and notes positioned on the infinite canvas — so it opens directly in tldraw or tldraw-offline as editable shapes, with no browser or render step. Use this skill when the user says "make me a tldraw diagram", "generate a .tldr file", "turn this architecture into a tldraw whiteboard", "build an editable canvas of this flow", or wants a hand-editable tldraw document rather than a flat image. Not for rendering a canvas to PNG/SVG (that needs a browser — see tldraw-export), converting Mermaid source (see mermaid-to-tldraw), or authoring Mermaid/Graphviz text diagrams.

name	tldraw-export
description	Renders a tldraw canvas or .tldr file to a static image — SVG, PNG, JPEG, or WebP — by driving tldraw's browser-based export APIs from a headless browser, producing a shareable picture from an editable canvas. Use this skill when the user says "export my tldraw file to PNG", "render this .tldr as an SVG", "turn my tldraw canvas into an image", or needs a flat image out of a tldraw document. Not for generating an editable .tldr from a description (see tldraw-diagram), converting Mermaid (see mermaid-to-tldraw), or exporting from the tldraw desktop app's own File menu.
license	MIT
metadata	{"skillsmith-see-also":"tldraw-diagram, mermaid-to-tldraw","skillsmith-invocation":"user","skillsmith-maturity":"experimental"}
user-invocable	true

tldraw-export

Set up the headless pipeline

Load the shapes into a real page. Mount a tldraw editor in a Playwright Chromium page, then loadSnapshot(editor.store, snapshot) from the .tldr (or use a canvas the user already has open). A DOM-less runtime will fail — this is the single most common mistake.
Choose the export call. Use the editor's export API to produce the image: an SVG string for vector output, or a rasterized blob for PNG/JPEG/WebP. Pass the shape ids to export (all shapes, or a selection) and options like background, padding, and scale.
Persist the bytes. Write the SVG string or the blob to the target path from the browser context (download or page.evaluate returning bytes).

See references/headless-export.md for the concrete Playwright + export-API recipe, format trade-offs, and gotchas.

Choose the format deliberately

SVG — vector, editable, smallest for diagrams; best default for docs.
PNG — lossless raster with transparency; use scale: 2 for crisp output.
JPEG — smaller, no transparency; only for photo-heavy canvases.
WebP — small raster where the target supports it.

Match the format to the destination (README, slide, print) instead of defaulting to PNG every time.

Verify before handing off

The output file exists, is non-empty, and opens as the claimed format.
All intended shapes are inside the frame — a cropped export usually means the export bounds or padding were wrong, not the shapes.
For raster output, confirm the resolution matches the requested scale.
Report the format, dimensions, and whether the whole canvas or a selection was exported.