Cowart Local Infinite Canvas

Problem

When an AI needs to modify an HTML report or web page, verbal instructions often miss the exact target element: a user may want a specific spacing value, button color, or visual adjustment, but describing that intent precisely is hard. Cowart addresses this “visible but hard to specify” collaboration gap.

How It Works

It provides a local infinite canvas built on tldraw, placing web pages, HTML reports, and AI-generated images in the same visual context. The core workflow is:

• Start the canvas locally and read or write snapshots, selection state, and view state through REST APIs on http://127.0.0.1:43217.
• Annotate arrows, text, and circles on the canvas; annotation text is stored in props.richText and can be read via read_annotations.py or the API, without relying on OCR.
• Create an AI image holder, read its selected dimensions, generate an image with matching proportions, and insert it back into the canvas.
• Import HTML in editor mode, select elements to adjust styles, then insert the result into the canvas as a preview image for continued annotation and source-file updates.

Boundaries

This skill fits workflows where a local Node.js environment is available and canvas data can remain in the project’s canvas/ directory. Cross-origin resources can cause screenshot export failures due to tainted canvas; if the API is unavailable, fallbacks include screenshot-based description or manual JSON parsing.