Where are these examples intended to be stored?

This skill is specifically designed for adding content to the apps/examples/src/examples directory within the tldraw repository.

What is the difference between a Tight and Use-case example?

Tight examples focus narrowly on a specific SDK feature with minimal code, while Use-case examples prioritize showing a recognizable and complete user experience.

How does the skill handle CSS for examples?

It follows the standard of putting styles in a separate CSS file named after the example and importing it alongside the main tldraw CSS to avoid inline style bloat.

Can this skill help with UI controls within the canvas?

Yes, it provides patterns for using the TopPanel component slot and TldrawUiButton to create consistent control panels for interactive demonstrations.

Tldraw SDK Example Writer

Name: Tldraw SDK Example Writer
Author: tldraw

bytldraw

•

44,825

•

Aprendizaje y Documentación

Standardizes the creation of high-quality code demonstrations and documentation for the tldraw infinite canvas SDK.

This skill guides developers through the process of creating compliant examples for the tldraw SDK documentation and gallery. It automates the generation of specific folder structures, required YAML frontmatter for metadata, and React component scaffolding that adheres to tldraw's architectural standards. By enforcing best practices for style separation, UI control panels, and numbered code comments, it ensures that every new demonstration is consistent, readable, and ready for deployment to the tldraw examples site.

Características Principales

01Implements standard UI control panels using TopPanel and TldrawUiButton slots

02Scaffolds React components using the tldraw__editor layout and SDK patterns

03Generates standardized kebab-case folder structures and PascalCase component files

04Automates README.md frontmatter with valid category IDs and priority levels

0544,825 GitHub stars

06Enforces specific documentation patterns including footnote-style code comments

Casos de Uso

01Contributing new feature demonstrations to the official tldraw SDK examples gallery

02Building minimal 'Tight Examples' to showcase specific API capabilities for developers

03Creating complex 'Use-case Examples' that demonstrate real-world whiteboard applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tldraw/tldraw write-example

For use in Claude.ai and ChatGPT

Download Skill