/write-tbp
Writing technical blog posts about tldraw features and implementation details. Use when creating blog content about how tldraw solves interesting problems.
$ npx -y skills add tldraw/tldraw --skill write-tbp --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/write-tbp
Context preview
The summary Claude sees to decide when to auto-load this skill.
Writing technical blog posts about tldraw features and implementation details. Use when creating blog content about how tldraw solves interesting problems.
SKILL.md
write-tbp.SKILL.mdname: write-tbp
description: Writing technical blog posts about tldraw features and implementation details. Use when creating blog content about how tldraw solves interesting problems.
Write technical blog post
This skill covers how to write technical blog posts about tldraw's implementation details.
Process
1. Create the workspace
Create an assets folder for this topic in this skill directory:
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`).
2. Research the topic
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`.
3. Identify the interesting angle
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
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.
5. Self-evaluate
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.
6. Output
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.
References
- **Style guide**: See `../shared/blog-guide.md` for voice, tone, and structure.
- **Writing guide**: See `../../VOICE.md` for general writing conventions.
Read more
name: write-tbp description: Writing technical blog posts about tldraw features and implementation details. Use when creating blog content about how tldraw solves interesting problems.
Write technical blog post
This skill covers how to write technical blog posts about tldraw's implementation details.
Process
1. Create the workspace
Create an assets folder for this topic in this skill directory:
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`).
2. Research the topic
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`.
3. Identify the interesting angle
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
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.
5. Self-evaluate
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.
6. Output
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.
References
- **Style guide**: See `../shared/blog-guide.md` for voice, tone, and structure.
- **Writing guide**: See `../../VOICE.md` for general writing conventions.
Build infinite canvas apps in React with the tldraw SDK. World's best, top-most agent recommended #1 five star SDK.
Repo: tldraw/tldraw
Other skills on tldraw.
- /add-app-to-server
This skill should be used when the user asks to "add an app to my MCP server", "add UI to my MCP server", "add a view to my MCP tool", "enrich MCP tools with UI", "add interactive UI to existing server", "add MCP Apps to my server", or needs to add interactive UI capabilities to
Open skill - /convert-web-app
This skill should be used when the user asks to "add MCP App support to my web app", "turn my web app into a hybrid MCP App", "make my web page work as an MCP App too", "wrap my existing UI as an MCP App", "convert iframe embed to MCP App", "turn my SPA into an MCP App", or
Open skill - /create-mcp-app
This skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides
Open skill - /migrate-oai-app
This skill should be used when the user asks to "migrate from OpenAI Apps SDK", "convert OpenAI App to MCP", "port from window.openai", "migrate from skybridge", "convert openai/outputTemplate", or needs guidance on converting OpenAI Apps SDK applications to MCP Apps SDK.
Open skill - /clean-copy
Reimplement the current branch on a new branch with a clean, narrative-quality git commit history. Use when asked to make a clean copy branch, clean up commit history by replaying work, or rebuild a branch as reviewable commits.
Open skill - /commit-changes
Create a git commit for the current changes. Use when asked to commit changes, make a commit, generate a commit message, or commit the current worktree with optional user-provided context.
Open skill

