canvas

Create, read, and manipulate visual shapes on a workspace canvas.

Updated Feb 17, 2026
One-click install
npx skills add https://github.com/Celia-12/Proyecto-Mern --skill canvas-celia-12
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/Celia-12/Proyecto-Mern/tree/main/frontend/.local/skills/canvas
Command: npx skills add https://github.com/Celia-12/Proyecto-Mern --skill canvas-celia-12

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The canvas skill removes the complexity of manually handling visual layout by offering a unified API to read and manipulate shapes on an infinite workspace, enabling fast prototyping and diagramming.

Core Features & Use Cases

  • get_canvas_state: Retrieves detailed information about focused, blurry, and peripheral shapes, giving you a clear picture of the current layout.
  • apply_canvas_actions: Executes batches of create, update, move, resize, delete, align, and distribute actions for geometric, text, note, iframe, image, and video elements.
  • Use Cases: Rapidly prototype UI screens, design flow diagrams, or organize collaborative sticky notes within a shared canvas.

Quick Start

Ask the canvas skill to add a new rectangle shape at position (100,100) with size 200×150 labeled “Welcome”.

Frequently Asked Questions about canvas

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

FAQPage Schema
How do I programmatically create and manipulate visual shapes on a workspace canvas?

To create and manipulate visual shapes on a workspace canvas, use the apply_canvas_actions API to execute batches of create, update, move, resize, delete, align, and distribute actions for geometric, text, and media elements.

What is the best way to layout UI components and design flow diagrams collaboratively?

Layout UI components and design flow diagrams by using a unified canvas API that retrieves current layout states via get_canvas_state and applies geometric, text, iframe, image, and video element actions for rapid prototyping.

Can I embed iframe, image, and video elements on a canvas using HTTPS URLs?

Yes, you can embed iframe, image, and video elements on a canvas using HTTPS URLs. The canvas API supports handling HTTPS URLs and resolving local assets within your visual workspace layout.

How do I retrieve detailed information about focused and peripheral shapes on a shared canvas?

Retrieve detailed information about focused, blurry, and peripheral shapes by calling the get_canvas_state API, which provides a clear picture of the current visual layout on the shared canvas.

Does the canvas API support organizing visual notes and sticky elements within collaborative web applications?

Yes, the canvas API supports organizing visual notes and sticky elements within collaborative web applications by allowing you to read the current canvas state and apply batch actions to text and note elements.