canvas

Name: canvas
Availability: InStock
Author: adminsairolotech-bit

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

Updated Mar 22, 2026

Search Tags:#design #layout #workspace #canvas #prototype #iframe #shapes

Ready to run

npx skills add https://github.com/adminsairolotech-bit/sai-rolotech-smart-engines --skill canvas-adminsairolotech-bit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/adminsairolotech-bit/sai-rolotech-smart-engines/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/adminsairolotech-bit/sai-rolotech-smart-engines --skill canvas-adminsairolotech-bit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Canvas skill provides a self-contained workspace to visually compose, read, and rearrange shapes and embedded content on an infinite canvas, enabling rapid prototyping and organization of ideas.

Core Features & Use Cases

Create, read, and modify shapes including geo, text, note, iframe, image, and video to design layouts and track artifacts.
Use get_canvas_state to inspect the current board state and apply_canvas_actions to batch-create, update, move, resize, delete, or reorder shapes, with alignment and distribution utilities.
Leverage iframes for live previews and embedded content, with HTTPS URLs and optional labels (componentName, componentPath) for easy identification.

Quick Start

Get the current canvas state with get_canvas_state and then apply a batch of actions with apply_canvas_actions to update the board, followed by presentArtifact to surface the result to the user.

Frequently Asked Questions about canvas

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

FAQPage Schema

How do I create and arrange shapes on an infinite workspace canvas?▼

To create and arrange shapes on a workspace canvas, use apply_canvas_actions to batch-create, move, resize, or reorder shapes, and utilize alignment and distribution utilities for precise layout organization.

Can I embed live external content and video previews on a design canvas?▼

Yes, you can embed live external content on a design canvas by creating iframe, image, and video shapes. You must use HTTPS URLs for iframes and can apply optional labels like componentName or componentPath for identification.

What's the best way to inspect the current layout before modifying a design prototype?▼

The best way to inspect a design prototype layout is to call get_canvas_state. This retrieves the current board state, allowing you to review existing shapes and artifacts before applying any batch updates.

What types of visual elements can I use for layout exploration and prototyping?▼

For layout exploration and prototyping, you can use visual elements including geo, text, note, iframe, image, and video shapes. These allow you to compose, read, and rearrange artifacts on an infinite canvas.

Are there any limitations when embedding iframes for live previews?▼

Yes, when embedding iframes for live previews, the main limitation is that all URLs must strictly use HTTPS. Additionally, you should apply shape labeling such as componentName or componentPath for clear identification.

How do I surface the updated canvas state to the user after applying batch actions?▼

To surface the updated canvas state to the user after applying batch actions with apply_canvas_actions, you must call presentArtifact. This displays the resulting modified board layout and visual changes.