tldraw agent skills for Claude Code, Cursor and RevampKey

3 ready-made playbooks that teach an AI agent how to do real tldraw work: which tools to call, what to check first, and when to stop and ask you.

Download RevampKey, free I have it: connect tldraw

Connect tldraw once and all 3 skills install themselves and stay up to date. Mac, Windows and Linux.

All 3 tldraw skills

Each skill is one job. You ask in plain words and the agent loads the skill that matches, then follows its steps.

Start hereAsks before writing6 tldraw tools

Work on your tldraw canvas with AI, safely

Reads your tldraw canvas first, then draws, edits or saves checkpoints, asking for your explicit yes before any change and before anything is deleted.

Use it when

You want an agent to sketch a diagram next to your existing work without overwriting it
You need to tidy or relabel shapes on a board you have been building for days
You want to save a checkpoint before a large rebuild so you can return to it

Tools it uses

read_checkpoint
diagram_drawing_read_me
create_shapes
update_shapes
delete_shapes
save_checkpoint

Example

Read my current canvas and tell me what is on it, then add a simple request-flow diagram to the empty space on the right.

I read the canvas: it has a sketch of three services and a database on the left. I will add a request flow in the empty area on the right: a client, an API gateway and a worker, connected in order. Nothing will be changed on the left. Shall I apply this?

Use in RevampKeyRead the full skill →

Asks before writing6 tldraw tools

Explain a system as a diagram on your tldraw canvas

Turns a complex system, process or topic into a readable diagram on your tldraw canvas, then walks you through it. It asks before changing anything on a canvas you already have.

Use it when

You need to explain how a checkout or onboarding flow works to a new team member
You want an architecture map of services and what depends on what
You are mapping a decision process with its branches and failure paths

Tools it uses

diagram_drawing_read_me
read_checkpoint
create_shapes
update_shapes
save_checkpoint
delete_shapes

Example

Draw a diagram of how a password reset works, from the request to the new login, including the expired-link case, and walk me through it.

I'd draw this as a flowchart with about nine nodes: request reset, email sent, link clicked, link valid? (decision), set new password, and confirm login, plus an expired-link branch that returns to request reset. Before I add anything to your canvas, do you want it in a fresh area or beside the existing sketch? Once you say yes, I'll place it and walk you through the main path and the expired-link branch.

Use in RevampKeyRead the full skill →

Asks before writing6 tldraw tools

Turn a tldraw sketch into a code handoff

Reads an existing sketch, diagram or chart from your tldraw canvas and turns it into an implementation brief or code scaffold, listing open questions where the drawing is ambiguous. It asks before changing anything on the canvas.

Use it when

You sketched a service layout on the canvas and want a component brief for your team.
You have a flowchart from a meeting and need tickets for each step.
You want a code scaffold with stub modules matching a whiteboard architecture.

Tools it uses

diagram_drawing_read_me
read_checkpoint
create_shapes
update_shapes
delete_shapes
save_checkpoint

Example

Turn the architecture sketch on my canvas into an implementation brief. List anything that's unclear.

I read the current canvas and found 6 components, 9 arrows and 2 frames. The brief lists 6 components with their labels verbatim. 3 arrows are unlabelled, so I've marked them as open questions. 1 dashed arrow reads as optional, and I need you to confirm that before I treat it as normal flow.

Use in RevampKeyRead the full skill →

Get all 3 without copying a file

RevampKey adds the skills when you connect tldraw, updates them for you and removes them when you disconnect.

Download RevampKey

How tldraw skills work

Connect tldraw
The tldraw MCP server gives the agent its tools.
Ask in plain words
“Draw a diagram of how a password reset works, from the request to the new login, including the expired-link case, and walk me through it.” Each SKILL.md says when it applies, so only the one that fits is loaded.
Approve any change
The agent calls the tools in order, checks its work, and shows you any change before it makes it.

How to install tldraw skills

In RevampKey the skills install themselves when you connect tldraw. In other tools each skill is one folder with a SKILL.md file, and you also need the tldraw MCP server connected there.

About 1 minute · nothing to copy

Download RevampKey for Mac, Windows or Linux and sign in.
Open Connectors and connect tldraw. All 3 skills come with it and stay up to date; they go away when you remove the connector.
Ask in plain language, for example “Draw a diagram of how a password reset works, from the request to the new login, including the expired-link case, and walk me through it.”
Download RevampKeyConnect tldraw · 1 click
Get RevampKey to connect tldraw
RevampKey is a free desktop app for Mac, Windows and Linux. Install it, sign in, and tldraw is one click away with its skills already attached.
Download RevampKey
Not now? Use the skills in your current tool
for s in essentials diagram-explanation sketch-to-code-handoff; do curl -fsSL --create-dirs -o .claude/skills/tldraw-$s/SKILL.md https://revampkey.com/marketplace/tldraw/skills/$s/SKILL.md done
Other tools

Into this project’s .claude/skills folder

Connect the tldraw MCP server in Claude Code.

Run this in your project folder to add all 3 skills:

for s in essentials diagram-explanation sketch-to-code-handoff; do
  curl -fsSL --create-dirs -o .claude/skills/tldraw-$s/SKILL.md https://revampkey.com/marketplace/tldraw/skills/$s/SKILL.md
done

Ask in plain language, for example “Draw a diagram of how a password reset works, from the request to the new login, including the expired-link case, and walk me through it.”

Into the shared .agents/skills folder

Connect the tldraw MCP server in Cursor.

Run this in your project folder to add all 3 skills:

for s in essentials diagram-explanation sketch-to-code-handoff; do
  curl -fsSL --create-dirs -o .agents/skills/tldraw-$s/SKILL.md https://revampkey.com/marketplace/tldraw/skills/$s/SKILL.md
done

Ask in plain language, for example “Draw a diagram of how a password reset works, from the request to the new login, including the expired-link case, and walk me through it.”

Into the shared .agents/skills folder

Connect the tldraw MCP server in Codex.

Run this in your project folder to add all 3 skills:

for s in essentials diagram-explanation sketch-to-code-handoff; do
  curl -fsSL --create-dirs -o .agents/skills/tldraw-$s/SKILL.md https://revampkey.com/marketplace/tldraw/skills/$s/SKILL.md
done

Ask in plain language, for example “Draw a diagram of how a password reset works, from the request to the new login, including the expired-link case, and walk me through it.”

Into the shared .agents/skills folder

Connect the tldraw MCP server in VS Code.

Run this in your project folder to add all 3 skills:

for s in essentials diagram-explanation sketch-to-code-handoff; do
  curl -fsSL --create-dirs -o .agents/skills/tldraw-$s/SKILL.md https://revampkey.com/marketplace/tldraw/skills/$s/SKILL.md
done

Ask in plain language, for example “Draw a diagram of how a password reset works, from the request to the new login, including the expired-link case, and walk me through it.”

RevampKey or copy the files?

In RevampKey

One click when you connect tldraw
Updated for you when a skill improves
Removed when you disconnect
The MCP server is set up for you
800+ other connectors, same way

Download free

Copy into your project

One command per project
Run it again to get updates
You connect the tldraw MCP server yourself
Works in Claude Code, Cursor, Codex and VS Code

See the command

tldraw skills FAQ

What is a tldraw agent skill?

A SKILL.md file: a short playbook an AI agent loads when your request matches it. Each tldraw skill describes one job, which tldraw tools to use in which order, what to check first and when to stop and ask you.

Do the tldraw skills change anything on their own?

The others tell the agent to show you the change and wait for a yes before it creates, edits or deletes anything in tldraw.

Which tools can use these skills?

Any agent that reads the open Agent Skills format: Claude Code, Cursor, Codex, VS Code with Copilot and RevampKey. In RevampKey they are attached when you connect tldraw; elsewhere you copy the folders into your project or skills directory.

Do I need the tldraw MCP server too?

Yes. The skills tell the agent how to do the work; the tldraw MCP server gives it the tools to do it. The tldraw MCP setup guide covers every client.

tldraw MCP server setup · This page as Markdown

Put tldraw’s best workflows in your agent

Download RevampKey, connect tldraw and ask your first question in about a minute.

Download RevampKey Connect tldraw · 1 click

All 3 tldraw skills

Work on your tldraw canvas with AI, safely

Use it when

Tools it uses

Explain a system as a diagram on your tldraw canvas

Use it when

Tools it uses

Turn a tldraw sketch into a code handoff

Use it when

Tools it uses

Get all 3 without copying a file

How tldraw skills work

How to install tldraw skills

RevampKey or copy the files?

In RevampKey

Copy into your project

tldraw skills FAQ

Put tldraw’s best workflows in your agent

Skills for related tools