mcpField
W
write-docs

write-docs

github.com/tldraw开发51.1k487 次安装今天更新
代码仓库

关于 write-docs

为 tldraw SDK 编写和更新文档的技能，面向文档作者与开发者。它说明文档位置、内容结构、MDX 组件用法及发布前核验步骤。

主要功能

  1. 01按受众界定文档范围
  2. 02指导创建 MDX 文档
  3. 03规定内容组织结构
  4. 04提供 API 链接与组件规范
  5. 05核验示例、链接和图片

适用场景

  1. 01编写 SDK 功能指南
  2. 02更新快速入门和设置文档
  3. 03编写 API 参考内容
  4. 04检查文档示例与链接

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tldraw/tldraw --skill write-docs

安装后在 Claude Code 中输入/write-docs确认已加载。

详细介绍

编写文档

本技能介绍如何编写和更新 tldraw SDK 文档。

位置

所有文档都位于 apps/docs/content/ 中。主要类别包括：

目录用途
docs/SDK 文档文章
releases/发布说明（参见 write-release-notes 技能）
examples/示例文档
getting-started/快速开始和设置指南

流程

1. 了解范围

在编写之前：

  • 确定目标读者（新用户、经验丰富的开发者、API 参考）
  • 检查涵盖相关主题的现有文档
  • 查看 apps/examples/ 中的相关示例
  • 阅读源代码中的 API 类型和注释
2. 创建文件

在适当的目录中创建一个新的 .mdx 文件，并添加 frontmatter：

---
title: Feature name
status: published
author: steveruizok
date: 3/22/2023
order: 1
keywords:
  - keyword1
  - keyword2
---
3. 编写内容

遵循以下结构：

  1. 概述 — 用 1-2 段说明是什么以及为什么
  2. 基本用法 — 最简单且可运行的示例
  3. 详细信息 — 更深入的说明以及更多示例
  4. 边界情况 — 高级模式、易错点
  5. 链接 — 相关文档和示例
4. 使用 MDX 组件
API 链接

使用 [ClassName](?) 或 [ClassName#methodName](?) 引用 API：

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

使用 <FocusLines> 高亮特定行：

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

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

</FocusLines>
图片
<Image
	src="/images/api/events.png"
	alt="A diagram showing an event being sent to the editor."
	title="Caption text here."
/>
用于 API 文档的表格

使用表格列出方法、选项或属性：

| 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. |
5. 验证

检查以下内容：

  • 代码示例确实可以运行
  • API 链接能够正确解析
  • 图片有 alt 文本
  • 标题使用句首大写
  • 没有 AI 痕迹（参见风格指南）

参考资料

  • 风格指南：关于语气、语调和格式约定，参见 ../shared/docs-guide.md。

评论

支持 Markdown