Agent Skills › tldraw/tldraw › write-docs

write-docs

GitHub

指导如何编写和更新 tldraw SDK 文档，涵盖内容结构、MDX 组件使用及验证流程。

skills/write-docs/SKILL.md tldraw/tldraw

触发场景

创建新的文档文章更新现有文档需要文档写作指导

安装

npx skills add tldraw/tldraw --skill write-docs -g -y

更多选项

不安装直接使用

npx skills use tldraw/tldraw@write-docs

指定 Agent (Claude Code)

npx skills add tldraw/tldraw --skill write-docs -a claude-code -g -y

安装 repo 全部 skill

npx skills add tldraw/tldraw --all -g -y

预览 repo 内 skill

npx skills add tldraw/tldraw --list

SKILL.md

Frontmatter

{
    "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\/."
}

Write documentation

This skill covers how to write and update tldraw SDK documentation.

Location

All documentation lives in apps/docs/content/. The main categories are:

Directory	Purpose
`docs/`	SDK documentation articles
`releases/`	Release notes (see write-release-notes skill)
`examples/`	Example documentation
`getting-started/`	Quickstart and setup guides

Process

1. Understand the scope

Before writing:

Identify the target audience (new users, experienced developers, API reference)
Check existing docs that cover related topics
Look at relevant examples in apps/examples/
Read the API types and comments in the source code

2. Create the file

Create a new .mdx file in the appropriate directory with frontmatter:

---
title: Feature name
status: published
author: steveruizok
date: 3/22/2023
order: 1
keywords:
  - keyword1
  - keyword2
---

3. Write the content

Follow the structure:

Overview — 1-2 paragraphs on what and why
Basic usage — The simplest working example
Details — Deeper explanation with more examples
Edge cases — Advanced patterns, gotchas
Links — Related docs and examples

4. Use MDX components

API links

Use [ClassName](?) or [ClassName#methodName](?) for API references:

The [Editor](?) class has many methods. Use [Editor#createShapes](?) to create shapes.

Code highlighting

Use <FocusLines> to highlight specific lines:

<FocusLines lines={[2,6,10]}>

\`\`\`tsx
import { Tldraw } from 'tldraw'
import { useSyncDemo } from '@tldraw/sync'
\`\`\`

</FocusLines>

Images

<Image
	src="/images/api/events.png"
	alt="A diagram showing an event being sent to the editor."
	title="Caption text here."
/>

Tables for API documentation

Use tables for listing methods, options, or properties:

| Method                   | Description                                    |
| ------------------------ | ---------------------------------------------- |
| [Editor#screenToPage](?) | Convert a point in screen space to page space. |
| [Editor#pageToScreen](?) | Convert a point in page space to screen space. |

| Value     | Description                                          |
| --------- | ---------------------------------------------------- |
| `default` | Sets the initial zoom to 100%.                       |
| `fit-x`   | The x axis will completely fill the viewport bounds. |