Canvas-ui skill

A Claude Code skill that encodes the conventions and recurring landmines of a production tldraw-based canvas codebase — the anti-patterns layer for canvas frontend work.

Open source: coo-labs/skills/v0.3.0/skills/canvas-ui

canvas-ui is the anti-patterns and conventions layer for a production tldraw-based canvas codebase. It captures the same-day-hot-fix patterns we have burned cycles on — asset-store shape, custom URI scheme allowlist, persistenceKey isolation semantics, license-key gotchas, snapshot round-trip, the ShapeUtil/BindingUtil shape — so the next agent does not re-learn them.

The skill is the patterns layer; the sister skill tldraw-docs is the SDK-reference layer. Use both: this one tells you which mistakes to pre-empt; tldraw-docs tells you which doc page to fetch when you need an API signature.

Provenance

The skill was extracted from vade-core, a tldraw-based canvas application. Concrete path references (src/shapes/, src/shell/, vade-asset-store.ts) reflect that codebase’s layout. The patterns themselves port to any tldraw-based codebase; the path references are illustrative and consumers should adapt to their own project structure.

Install

Drop the skill directory into your project’s .claude/skills/. The setup script in the public repo does this for you.

Links to this page

Tldraw-docs skill

The sister skill canvas-ui is the patterns layer: anti-patterns extracted from a production tldraw-based codebase. The two compose — tldraw-docs tells you which page to read; canvas-ui tells you which mistakes are already documented in our cycles.

Tools and agents

• Quarto-docs — Navigate Quarto SDK docs without hallucinating YAML keys.
• Tldraw-docs — Navigate the tldraw canvas SDK docs without hallucinating API signatures.
• Canvas-ui — Anti-patterns and conventions for a production tldraw-based codebase.
• Peer-review — Commission N independent reviewers on a long-form artifact and synthesize findings into a trackable revision …