Main Site โ†—

tldraw

by tldraw46.1k2.9kGitHub

This Skill provides detailed guidance for working with the tldraw monorepo, a React-based infinite canvas SDK. It covers setup, essential commands, architecture, and detailed patterns for writing examples. The documentation is well-structured with clear command references and architectural explanations.

Unlock Deep Analysis

Use AI to visualize the workflow and generate a realistic output preview for this skill.

Powered by Fastest LLM

Target Audience

Developers contributing to the tldraw monorepo or maintaining similar React-based canvas editor projects

10/10Security

Low security risk, safe to use

9
Clarity
8
Practicality
9
Quality
9
Maintainability
7
Innovation
Development
reactcanvas-editormonorepodocumentationtypescript
Compatible Agents
Claude Code
Claude Code
~/.claude/skills/
Codex CLI
Codex CLI
~/.codex/skills/
Gemini CLI
Gemini CLI
~/.gemini/skills/
O
OpenCode
~/.opencode/skills/
O
OpenClaw
~/.openclaw/skills/
GitHub Copilot
GitHub Copilot
~/.copilot/skills/
Cursor
Cursor
~/.cursor/skills/
W
Windsurf
~/.codeium/windsurf/skills/
C
Cline
~/.cline/skills/
R
Roo Code
~/.roo/skills/
K
Kiro
~/.kiro/skills/
J
Junie
~/.junie/skills/
A
Augment Code
~/.augment/skills/
W
Warp
~/.warp/skills/
G
Goose
~/.config/goose/skills/

Skill Collection

34 Skills

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 an existing MCP server that already has tools. Provides guidance for analyzing existing tools and adding MCP Apps UI resources.

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 needs to add MCP App support to an existing web application while keeping it working standalone. Provides guidance for analyzing existing web apps and creating a hybrid web + MCP App with server-side tool and resource registration.

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 comprehensive guidance for building MCP Apps with interactive UIs.

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. Provides step-by-step migration guidance with API mapping tables.

pr-walkthrough

Create a narrated video walkthrough of a pull request with code slides and audio narration. Use when asked to create a PR walkthrough, PR video, or walkthrough video.

review-docs

Review and improve documentation with parallel evaluation and iterative improvement loop.

shepherd-pr

Keep an eye on this PR. Review and resolve pull request comments and fix build failures autonomously. Use when asked to review PR feedback, address reviewer comments, fix CI failures, resolve PR threads, or handle PR maintenance tasks like "review PR comments", "fix the build", "address PR feedback", "clean up PR", or "resolve comments". Handles comment triage (resolve false positives, fix trivial issues, flag complex ones), build/lint/type errors, and e2e snapshot updates.

skill-creator

A

A meta-skill that provides structured guidance and templates for creating other Claude Skills. It offers clear principles for skill design, directory structure templates, and practical examples for scripts and references. Includes a Node.js script to scaffold new skill projects.

update-release-notes

Update the release notes file at `apps/docs/content/releases/next.mdx` based on PRs merged to main since the previous release, or archive `next.mdx` to a versioned file when a new version is published.

write-e2e-tests

Writing Playwright E2E tests for tldraw. Use when creating browser tests, testing UI interactions, or adding E2E coverage in apps/examples/e2e or apps/dotcom/client/e2e.

write-example

Writing examples for the tldraw SDK examples app. Use when creating new examples, adding SDK demonstrations, or writing example code in apps/examples.

write-issue

A

This skill enforces consistent GitHub issue formatting for the tldraw repository. It provides specific rules for titles, issue types, labels, and body content, along with triage workflows. It helps maintain clean issue tracking by standardizing how bugs, features, and tasks are reported.

write-pr

A

This skill provides structured guidance for writing pull requests in the tldraw repository. It enforces Conventional Commits format for titles and includes templates for PR bodies with specific sections for change types, test plans, and release notes. The instructions are clear about when to use the skill and what content to include or avoid.

write-release-notes

Writing release notes articles for tldraw SDK releases. Use when creating new release documentation, drafting release notes from scratch, or reviewing release note quality. Provides guidance on structure, voice, and content for release files in `apps/docs/content/releases/`.

write-tbp

Writing technical blog posts about tldraw features and implementation details. Use when creating blog content about how tldraw solves interesting problems.

write-unit-tests

Writing unit and integration tests for the tldraw SDK. Use when creating new tests, adding test coverage, or fixing failing tests in packages/editor or packages/tldraw. Covers Vitest patterns, TestEditor usage, and test file organization.

Coming Soon
write-prwrite-issueskill-creatorwrite-examplewrite-unit-testswrite-docswrite-e2e-testswrite-exampleupdate-release-noteswrite-tbpreview-docswrite-release-notesadd-app-to-servercreate-mcp-appconvert-web-appmigrate-oai-apppr-walkthroughshepherd-pr

Evaluation

Pros

  • ไธบ monorepo ๅทฅไฝœๆตๆไพ›ไบ†ๆธ…ๆ™ฐ็š„ๅ‘ฝไปคๅ‚่€ƒ
  • ่ฏฆ็ป†ๅˆ†่งฃไบ† tldraw ๅ„ๅŒ…็š„ๆžถๆž„่ฎพ่ฎก
  • ๆไพ›ไบ†็ผ–ๅ†™็คบไพ‹ไปฃ็ ็š„ๅ…ทไฝ“ๆจกๅผๅ’ŒๆŒ‡ๅ—
  • ๅŒ…ๅซๆต‹่ฏ•็ญ–็•ฅๅ’ŒๅทฅไฝœๅŒบ็ป“ๆž„่ฏดๆ˜Ž

Cons

  • ๅ†…ๅฎนไพง้‡ไบŽๅ†…้ƒจไป“ๅบ“็ป“ๆž„
  • ๅฏนๆœ€็ปˆ็”จๆˆท้›†ๆˆ tldraw SDK ็š„ๆŒ‡ๅฏผๆœ‰้™
  • ๅ‡่ฎพไฝฟ็”จ่€…ๅทฒ็†Ÿๆ‚‰ monorepo ๅทฅๅ…ท้“พ

Summary

่ฏฅๆŠ€่ƒฝไธบไฝฟ็”จ tldraw ๆ— ้™็”ปๅธƒ SDK ็š„ monorepo ้กน็›ฎๆไพ›ไบ†่ฏฆ็ป†ๆŒ‡ๅฏผใ€‚ๅ†…ๅฎนๅŒ…ๆ‹ฌ็Žฏๅขƒ่ฎพ็ฝฎใ€ๆ ธๅฟƒๅ‘ฝไปคใ€ๆžถๆž„่ฏดๆ˜ŽไปฅๅŠ็ผ–ๅ†™็คบไพ‹ไปฃ็ ็š„ๅ…ทไฝ“ๆจกๅผใ€‚ๆ–‡ๆกฃ็ป“ๆž„ๆธ…ๆ™ฐ๏ผŒๅ‘ฝไปคๅ‚่€ƒๆ˜Ž็กฎ๏ผŒๆžถๆž„่งฃ้‡Šๅˆฐไฝใ€‚

User Ratings

What do you think about this skill?

Source: https://github.com/tldraw/tldraw

Content curated from original sources, copyright belongs to authors

Grade A
8.4AI Score
Best Practices
Checking...

This is a Skill Collection

Please copy individual Skills from the 16 available below

User Rating

USER RATING

0UP
0DOWN
Loading files...

WORKS WITH

Claude Code
Claude
Codex CLI
Codex
Gemini CLI
Gemini
O
OpenCode
O
OpenClaw
GitHub Copilot
Copilot
Cursor
Cursor
W
Windsurf
C
Cline
R
Roo
K
Kiro
J
Junie
A
Augment
W
Warp
G
Goose