Back to Details

write-tbp

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Write technical blog post

撰写技术博客文章

This skill covers how to write technical blog posts about tldraw's implementation details.
本技能涵盖如何撰写关于tldraw实现细节的技术博客文章。

Process

流程

1. Create the workspace

1. 创建工作区

Create an assets folder for this topic:
.claude/skills/write-tbp/assets/<topic>/
├── research.md   # Gathered context and notes
└── draft.md      # The blog post draft
Use a short, kebab-case name for the topic (e.g., 
scribbles
, 
arrow-routing
, 
dash-patterns
).
为此主题创建一个资源文件夹：
.claude/skills/write-tbp/assets/<topic>/
├── research.md   # 收集到的背景信息和笔记
└── draft.md      # 博客文章草稿
为主题使用简短的短横线命名格式（例如：
scribbles
, 
arrow-routing
, 
dash-patterns
）。

2. Research the topic

2. 调研主题

Use an Explore subagent to gather all relevant information:
Task (subagent_type: Explore, thoroughness: very thorough)

Find all code, documentation, and context related to [TOPIC] in the tldraw codebase.

Look for:
- Implementation files in packages/editor and packages/tldraw
- Type definitions in packages/tlschema
- Related examples in apps/examples
- Any existing documentation in apps/docs/content
- Tests that reveal behavior
- Comments explaining why things work the way they do

For each relevant file, note:
- What it does
- Key functions/classes
- Interesting implementation details
- Any "why" comments or non-obvious decisions

Output a comprehensive summary of how [TOPIC] works. This document will be read by another agent. No need to over-optimize for human readability.
Save the research output to 
assets/<topic>/research.md
.
使用Explore子代理收集所有相关信息：
Task (subagent_type: Explore, thoroughness: very thorough)

Find all code, documentation, and context related to [TOPIC] in the tldraw codebase.

Look for:
- Implementation files in packages/editor and packages/tldraw
- Type definitions in packages/tlschema
- Related examples in apps/examples
- Any existing documentation in apps/docs/content
- Tests that reveal behavior
- Comments explaining why things work the way they do

For each relevant file, note:
- What it does
- Key functions/classes
- Interesting implementation details
- Any "why" comments or non-obvious decisions

Output a comprehensive summary of how [TOPIC] works. This document will be read by another agent. No need to over-optimize for human readability.
将调研结果保存到
assets/<topic>/research.md
。

3. Identify the interesting angle

3. 确定有趣的切入点

Before writing, answer these questions from the research:
  • What problem does this solve? Not "what does it do" but "what would go wrong without it?"
  • What's surprising or unintuitive? The obvious approach that doesn't work, or the hidden complexity.
  • What's the key insight? The "aha" that makes the solution work.
  • What did we try first? Any journey or iteration visible in the code or comments.
If you can't find an interesting angle, the topic may not be suitable for a technical blog post.
撰写前，根据调研内容回答以下问题：
  • 它解决了什么问题？ 不是“它能做什么”，而是“没有它会出现什么问题？”
  • 有哪些令人惊讶或违反直觉的点？ 行不通的常规方案，或是隐藏的复杂性。
  • 核心洞见是什么？ 让解决方案生效的“顿悟”点。
  • 我们最初尝试了什么？ 代码或注释中可见的探索或迭代过程。
如果找不到有趣的切入点，该主题可能不适合作为技术博客文章。

4. Write the draft

4. 撰写草稿

Create 
assets/<topic>/draft.md
following the blog-guide structure:
  1. Frame the problem — Hook the reader with context and tension
  2. Show the insight — The key idea that makes it work
  3. Walk through the implementation — Code and explanation, building complexity
  4. Wrap up — Where it lives, tradeoffs, links to files
Target 800-1500 words.
遵循博客指南结构创建
assets/<topic>/draft.md
：
  1. 提出问题 —— 用背景和矛盾吸引读者
  2. 展示洞见 —— 让方案生效的核心思路
  3. 拆解实现过程 —— 代码与讲解，逐步深入复杂度
  4. 总结收尾 —— 实现的位置、权衡、文件链接
目标字数：800-1500字。

5. Self-evaluate

5. 自我评估

Check the draft against the blog-guide checklist:
  • Opening — Does it frame a problem before diving into solution?
  • Insight — Is there a clear "aha" moment or key idea?
  • Specificity — Is this grounded in tldraw's actual implementation?
  • Code — Do examples build understanding, not just show syntax?
  • Tone — Warm and personal, but not rambling?
  • Links — Points to actual code in the repo?
  • Length — Appropriate depth for the topic?
Revise the draft to address any gaps.
对照博客指南清单检查草稿：
  • 开篇 —— 是否先提出问题再深入解决方案？
  • 洞见 —— 是否有清晰的“顿悟”时刻或核心思路？
  • 针对性 —— 是否基于tldraw的实际实现？
  • 代码 —— 示例是否有助于理解，而非仅展示语法？
  • 语气 —— 亲切自然但不冗长？
  • 链接 —— 是否指向仓库中的实际代码？
  • 篇幅 —— 与主题深度匹配？
修改草稿以填补任何不足。

6. Output

6. 输出成果

Present the final draft to the user for review. The draft remains in 
assets/<topic>/draft.md
until the user is satisfied, at which point they can move it to the appropriate location.
将最终草稿提交给用户审核。草稿会保留在
assets/<topic>/draft.md
中，直到用户满意后，可将其移至合适位置。

References

参考资料

  • Style guide: See 
    ../shared/blog-guide.md
    for voice, tone, and structure.
  • Writing guide: See 
    ../shared/writing-guide.md
    for general writing conventions.
  • 风格指南：查看
    ../shared/blog-guide.md
    了解语气、风格和结构。
  • 写作指南：查看
    ../shared/writing-guide.md
    了解通用写作规范。