agent-canvas

Create and manipulate visual elements on a TLDraw canvas via CLI.

17|1|Updated Feb 10, 2026
One-click install
npx skills add https://github.com/13point5/agent-canvas --skill agent-canvas-13point5
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: agent-canvas
Source: https://github.com/13point5/agent-canvas/tree/main/skills
Command: npx skills add https://github.com/13point5/agent-canvas --skill agent-canvas-13point5

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables agents to create and manipulate visual diagrams, flowcharts, and annotations on a digital whiteboard, facilitating clear communication of complex ideas and designs.

Core Features & Use Cases

  • Diagramming: Draw geometric shapes, text, and arrows to represent concepts and workflows.
  • Content Annotation: Add markdown, code snippets, and even interactive HTML to a shared canvas.
  • Visual Debugging: Utilize specialized shapes like stack-trace, code-diff, and test-results to visually represent debugging information and code changes.
  • Use Case: An agent can generate an architecture diagram for a new feature, then add code snippets for key implementation details, and finally use web-preview to show a live demo of the feature.

Quick Start

Use the agent-canvas skill to create a rectangle shape with the text "Hello" on the current board.

Frequently Asked Questions about agent-canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate architecture diagrams on a whiteboard for planning?

To generate architecture diagrams on a whiteboard for planning, you use this skill to draw geometric shapes, text, and arrows representing concepts and workflows via a CLI-driven TLDraw canvas. It supports diverse shape types for visually communicating architecture designs.

Can I visualize code diffs and stack traces during debugging workflows?

Yes, you can visualize code diffs and stack traces during debugging workflows by utilizing specialized whiteboard shapes like code-diff and stack-trace. This skill enables visual representation of debugging information and code changes directly on a shared digital canvas.

What is the best way to visually communicate PR reviews using a digital whiteboard?

The best way to visually communicate PR reviews using a digital whiteboard is by adding markdown, code snippets, and interactive HTML annotations to a shared canvas. This skill facilitates clear communication of complex code changes and design ideas for review workflows.

Does the TLDraw canvas support markdown and HTML content annotation?

Yes, the TLDraw canvas supports markdown and HTML content annotation, allowing you to add formatted text, code snippets, and interactive web previews to the digital whiteboard. This enables rich visual communication for architecture planning and visual debugging workflows.

How do I create geometric primitives and file trees on a digital whiteboard via CLI?

You create geometric primitives and file trees on a digital whiteboard via CLI by using this skill to manipulate visual elements on a TLDraw canvas. It supports drawing geometric shapes and AI-specific elements like file trees for visualizing project structures and architecture.