Publish Sign in

Writing tldraw SDK documentation

Writing SDK documentation for tldraw. Use when creating new documentation articles, updating existing docs, or when documentation writing…

You say
Install this skill Read the source first Free Written by tldraw · unverified publisher
Context cost
1.3k tokensestimated from the bundle, loaded when it triggers
Bundle
1 file · 5.1 kBtext throughout, nothing executable
Licence
Source-availablefree to use
Last change
—no release on file
Servers it uses
Noneruns standalone

What it does

Writing SDK documentation for tldraw. Use when creating new documentation articles, updating existing docs, or when documentation writing guidance is needed. Applies to docs in apps/docs/content/.

Installed, it changes the agent in these ways.

What this skill changes about the agent is not written down here yet. The listing was collected from its source, and the description is in its own SKILL.md.

Workflow

Runs a procedure end to end.

documentationwriting
Filed under

Learning & Documentation

The skill itself

This is the whole product. A skill is instructions the model reads, so there is nothing behind the listing you cannot see first — the front matter loads with every session, and the body below it loads when the skill triggers.

SKILL.md5.1 kB · 206 lines
--- name: write-docs description: Writing SDK documentation for tldraw. Use when creating new documentation articles, updating existing docs, or when documentation writing guidance is needed. Applies to docs in apps/docs/content/. ---
6# Writing tldraw SDK documentation
7
8## The tldraw voice
9
10Write like a colleague walking someone through code they know well. Confident, casual, code-first.
11
12**Characteristic patterns:**
13
14> Have five minutes? Run this command...
15
16> That's pretty much it!
17
18> Let's add local persistence by passing a persistenceKey prop...
19
20> Need to create some shapes? Use [Editor#createShapes](?). Need to delete them? Use [Editor#deleteShapes](?).
21
22**What makes it work:**
23
24- Direct address with "you" and "let's"
25- Questions as transitions ("Need to create some shapes?")
26- Exclamations that feel natural, not forced ("That's pretty much it!")
27- Jump straight to code, explain around it
28- Short sentences between code blocks
29
30### Confidence without hedging
31
32State facts. Don't soften them.
33
34```
35// Good
36The Editor class is the main way of controlling tldraw's editor.
37
38// Bad
39The Editor class can be used to control tldraw's editor.
40```
41
42### Density over exposition
43
44Real tldraw docs are code-heavy. A section might be 20 lines of code with 2 sentences of explanation. Don't pad with prose.
45
46## Avoid AI tells
47
48These break trust instantly:
49
50- **Hollow claims**: "plays a crucial role", "serves as a testament to"
51- **Trailing gerunds**: "...ensuring optimal performance"
52- **Formulaic transitions**: "Moreover,", "Furthermore,", "It's important to note"
53- **Promotional language**: "robust", "seamless", "empowers developers"
54- **Three-item lists**: Real writing has 2, 4, 7 items
55- **Passive voice**: "can be achieved by" — just show how
56- **Conversational asides**: "(or whatever)", "(if you want)", "(just saying)"
57
58## Mechanics
59
60- **Sentence case headings**: "Custom shapes" not "Custom Shapes"
61- **Active voice**: "The store validates records"
62- **Present tense**: "The migration system transforms"
63- **Contractions**: it's, we've, you'll, don't
64
65## Frontmatter
66
67```yaml
68---
69title: Feature name
70status: published
71author: steveruizok
72date: 3/22/2023
73order: 1
74keywords:
75 - keyword1
76 - keyword2
77---
78```
79
80## MDX components
81
82### API links
83
84Use [ClassName](?) or [ClassName#methodName](?) for API references:
85
86```markdown
87The [Editor](?) class has many methods. Use [Editor#createShapes](?) to create shapes.
88```
89
90### Code highlighting
91
92Use <FocusLines> to highlight specific lines:
93
94```markdown
95<FocusLines lines={[2,6,10]}>
96
97\\\`tsx
98import { Tldraw } from 'tldraw'
99import { useSyncDemo } from '@tldraw/sync'
100\\\`
101
102</FocusLines>
103```
104
105### Images
106
107```markdown
108<Image
109 src="/images/api/events.png"
110 alt="A diagram showing an event being sent to the editor."
111 title="Caption text here."
112/>
113```
114
115### Tables for API documentation
116
117Use tables for listing methods, options, or properties:
118
119```markdown
120| Method | Description |
121| ------------------------ | ---------------------------------------------- |
122| [Editor#screenToPage](?) | Convert a point in screen space to page space. |
123| [Editor#pageToScreen](?) | Convert a point in page space to screen space. |
124```
125
126```markdown
127| Value | Description |
128| --------- | ---------------------------------------------------- |
129| default | Sets the initial zoom to 100%. |
130| fit-x | The x axis will completely fill the viewport bounds. |
131```
132
133## Code examples
134
135Show code early, explain around it. Don't build up to code with paragraphs of context.
136
137### Realistic, minimal
138
139```tsx
140// Good: Real shape, real values
141editor.createShapes([
142 {
143 type: 'geo',
144 x: 0,
145 y: 0,
146 props: { geo: 'rectangle', w: 100, h: 100 },
147 },
148])
149
150// Bad: Placeholder nonsense
151editor.createShape({ type: 'example-type', props: { prop1: 'value1' } })
152```
153
154### Context when needed
155
156Full components are fine when showing integration patterns:
157
158```tsx
159export default function App() {
160 return (
161 <div style={{ position: 'fixed', inset: 0 }}>
162 <Tldraw persistenceKey="example" />
163 </div>
164 )
165}
166```
167
168Minimal snippets when showing a single API:
169
170```tsx
171editor.setFocusedGroup(groupId)
172```
173
174## Structure
175
176### Overview first
177
1781-2 paragraphs establishing what and why before diving into how.
179
180### Progressive complexity
181
182Start with the common case. Add complexity incrementally. Put edge cases later.
183
184### Link to examples
185
186End sections with links to relevant examples:
187
188```markdown
189> For an example of how to create custom shapes, see our [custom shapes example](/examples/shapes/tools/custom-shape).
190```
191
192Or in a section:
193
194```markdown
195---
196
197See the [tldraw repository](https://github.com/tldraw/tldraw/tree/main/apps/examples) for examples of how to use tldraw's Editor API.
198```
199
200## Priorities
201
2021. **Accuracy** — Code must work. API refs must be correct.
2032. **Clarity** — Understand on first read.
2043. **Brevity** — Say it once, move on.
2054. **Scannability** — Short paragraphs, clear headers, lots of code.
206
In the file
SKILL.md706 words
Files1
LicenceSource-available
Why you can read it

Nothing in a skill executes. The client loads the text and the model follows it, so a skill can be audited the way a runbook is — by reading it.

What it costs in context

Skills are not billed by the call. They are paid for in context: every token the instructions occupy is a token your code, your diff and your conversation cannot use. Here is what this one takes and when it takes it.

≈60
always loaded
The name and description, so the model knows the skill exists and when to reach for it.
1,215
on trigger
The instruction body, read only when the skill fires.
0.64%
of a 200k window
Ten skills this size would take about 6% of the window before you open a file.
050k100k150k200k context window

1.3k tokens, estimated from the bundle at four bytes to the token, held for the rest of the session once it triggers. Middling. Fine to keep on in a project where you use it weekly, worth unloading in one where you never do.

Servers bill, skills cost

A server charges by the month. A skill charges once per session, in context, and then keeps charging it for as long as the session lives.

Before and after

The same question, put to the same model twice: once as it comes, and once with these instructions loaded.

No worked example has been published for this skill yet.

Adoption
Installsnone yet
Ratingno reviews yet

The procedure it runs

The procedure has not been published here. It is in the skill’s own SKILL.md, which its author has not sent to the marketplace yet.

Prose, not code

These steps are written for a model to follow, not executed by a runtime. It can still be told to skip one, and it will say so when it does.

Servers it uses

None. This skill calls no MCP servers at all.

Everything it needs is in the instructions, so it works in a project with nothing connected — the model reads the file and changes how it works with what it can already reach.

It writes no files and reaches no network. All it changes is how the model reasons and writes.

What it asks for
Writes filesno
Network accessno

Read from the allowed-tools line of this skill’s own SKILL.md. A skill grants no permissions of its own — it can only ask for tools your client already has.

What it will not do

Every skill is narrow, and the useful ones say where they stop. These are the jobs this one is the wrong tool for.

What this skill is not for has not been published here. Nothing is implied by that: it is a section the author has not filled in.

What is in the bundle

1 file, 5.1 kB on disk. A bundle is text throughout: the instructions the model reads, plus the templates it fills in.

  • SKILL.md5.1 kB
What is not in it

No dependencies and nothing executable: a skill is text the agent reads, so the bundle is 1 file you can review in full before installing. The Source-available licence covers the templates and examples as well as the instructions.

Install

Installing copies the bundle into your project. Nothing runs at install time — the files sit on disk until the model reads them.

# Writing tldraw SDK documentation · 1.3k tokens when loaded npx mcprush@latest skill add tldraw/writing-tldraw-sdk-documentation

Writes to .claude/skills/writing-tldraw-sdk-documentation/ in the current project. Add --global to put it in your home directory instead, for every project.

Which clients pick it up on their own

A skill is a folder of text. A client with a skills folder reads it without being told; everywhere else the same text works, it is just handed to the model rather than found.

Claude Code.claude/skills/
Claude Desktop
ChatGPT
Cursor.cursor/skills/
VS Code.github/skills/
Codex CLI.agents/skills/
Gemini CLI.gemini/skills/
Grok.grok/skills/
Zed.agents/skills/
Windsurf.windsurf/skills/
Agent SDK.claude/skills/
HTTP / API
This release
Versionnot versioned
Publishedno release date on file
PriceFree
Referencetldraw/writing-tldraw-sdk-documentation

Versions

Its author publishes no version number, so there is nothing here to pin to: what you install is the folder as it stands today. Instructions change more often than APIs do — a skill can be rewritten entirely without anything it depends on moving.

v
  • No earlier releases have been published to the marketplace.
Pinning

Nothing to pin to: this skill carries no version number of its own. What you install is what the folder holds on the day you install it.

Reviews

—no reviews yet · no installs yet

Nobody has reviewed this skill yet. The rating is the mean of the reviews written here, so there is none until somebody writes the first.

Who can post

Only accounts that have had the skill installed for fourteen days, so a review is written after living with it rather than after reading it. Publishers may reply once.

Who wrote it

TL
tldraw

Publishes on mcprush.

0 servers listed8 skills listednot claimed
Profile
Publisher
Servers0
Claim this skill