AI Skill: Launch & Manage Your Prototype Canvas Seamlessly

AI Skill: Launch & Manage Your Prototype Canvas Seamlessly

This skill enables developers to start and manage a local instance of the tldraw design canvas, which displays HTML artboards for project prototype development. It provides the capabilities to initialize the development server, add or switch between boards, and annotate screenshots directly from the canvas.

What this skill does

• Initiates a local tldraw application to discover and render every `.html` file in designated board directories as shapes on a canvas.
• Launches a development server linked to project board folders, allowing seamless switching and addition of boards.
• Facilitates manipulation of shapes via the `window.snapCanvas` bridge within a controlled window.
• Enables the annotation and modification of existing canvas screenshots with drawn notes.
• Assists in correcting overlapping frames post modifications in `layout.json` files.

Who it is for

This AI skill is aimed at developers and teams utilizing AI coding agents such as Claude Code, Cursor, or Codex. It is particularly beneficial for those involved in prototyping and interface design using tldraw applications.

Use cases

• Developers need to quickly launch a design canvas to visualize HTML-based artboards.
• Teams working on projects requiring rapid iterations of UI mockups and careful presentation of design concepts.
• Scenarios where annotations on design screenshots are required for collaborative review and feedback.
• Projects involving frequent layout adjustments and the need for immediate updates on the prototype canvas.

Technical details

• This skill operates using the `sp-canvas` command line tool, which interfaces directly with the tldraw application.
• Integration requires a separate installation via the command: `uv tool install "git+https://github.com/ReScienceLab/super-prototyping#subdirectory=tools"`.
• The development server operates at `127.0.0.1:5173`, with customizable board directories and port assignments through command line options or environment variables.

Source & Licence

This package is built on open-source work published by ReScienceLab (ReScienceLab/super-prototyping) and distributed under Apache-2.0. The original licence text and copyright notice are included in your download.

Personal and commercial use, modification and redistribution are permitted under the Apache License 2.0, which also includes an express patent grant. Attribution and any NOTICE file must be retained.

Your purchase covers curation, licence verification, packaging, documentation and instant delivery. It does not grant exclusive rights to the underlying open-source code, which remains available under its original licence.

Delivery & Support

• Delivery: instant — a secure download link is emailed to you as soon as payment is confirmed.
• Format: ZIP archive containing the skill files, documentation and the original licence.
• Support: support@mcpcart.com — we aim to reply within 2 business days.
• Updates: updates are included only where stated on this page.

Refunds

This is a digital product delivered immediately after purchase. By completing your order you request immediate delivery and acknowledge that, once the download has been accessed, the statutory right to cancel no longer applies to the extent permitted by law. Refund requests are handled in accordance with our published Refund Policy.

Claude, Codex, Gemini and Cursor are trademarks of their respective owners. MCP Cart is an independent marketplace and is not affiliated with, endorsed by, or sponsored by any of them. Compatibility references describe interoperability only.