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

Learning & Documentation

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

About

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.

Key Features

Implements standard UI control panels using TopPanel and TldrawUiButton slots
Scaffolds React components using the tldraw__editor layout and SDK patterns
Generates standardized kebab-case folder structures and PascalCase component files
Automates README.md frontmatter with valid category IDs and priority levels
44,825 GitHub stars
Enforces specific documentation patterns including footnote-style code comments

Use Cases

Contributing new feature demonstrations to the official tldraw SDK examples gallery
Building minimal 'Tight Examples' to showcase specific API capabilities for developers
Creating complex 'Use-case Examples' that demonstrate real-world whiteboard applications

About

Key Features

Implements standard UI control panels using TopPanel and TldrawUiButton slots
Scaffolds React components using the tldraw__editor layout and SDK patterns
Generates standardized kebab-case folder structures and PascalCase component files
Automates README.md frontmatter with valid category IDs and priority levels
44,825 GitHub stars
Enforces specific documentation patterns including footnote-style code comments

Use Cases

Contributing new feature demonstrations to the official tldraw SDK examples gallery
Building minimal 'Tight Examples' to showcase specific API capabilities for developers
Creating complex 'Use-case Examples' that demonstrate real-world whiteboard applications