canvas

Create, manipulate, and query visual elements on a digital canvas.

2|Updated Mar 12, 2026

Search Tags:#design #layout #image #canvas #iframe #shapes #visual elements

Ready to run

npx skills add https://github.com/patriotnewsactivism/Casebuddy-AI-Law-Partner --skill canvas-patriotnewsactivism

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/patriotnewsactivism/Casebuddy-AI-Law-Partner/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/patriotnewsactivism/Casebuddy-AI-Law-Partner --skill canvas-patriotnewsactivism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill allows for the programmatic creation, manipulation, and organization of visual elements on an infinite workspace canvas, streamlining the design and layout process.

Core Features & Use Cases

Shape Creation: Supports geometric shapes, text, notes, iframes, images, and videos.
State Reading: Retrieve the current state of the canvas, including shape positions, types, and properties.
Action Application: Apply a series of actions to modify the canvas, such as creating, updating, deleting, moving, resizing, aligning, or distributing shapes.
Use Case: Automatically generate a visual sitemap by creating boxes for each page, linking them with lines, and embedding preview iframes for each section.

Quick Start

Create a blue rectangle with the text "My Shape" at position 100, 100 with dimensions 200x150.

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 elements on a digital canvas?▼

You can programmatically create and manipulate visual elements on a digital canvas by applying a series of actions to generate, update, delete, move, resize, align, or distribute shapes using a specific coordinate system.

What types of shapes and visual elements can I add to an infinite workspace canvas?▼

You can add geometric shapes, text, notes, iframes, images, and videos to an infinite workspace canvas, specifying shape properties and precise positions to streamline the layout process.

How do I retrieve the current state of canvas shapes and their properties?▼

Retrieving the current canvas state involves querying the workspace to read shape positions, element types, and specific properties, enabling precise tracking and control over the visual layout.

Can I embed external content like videos and iframes when designing a canvas layout?▼

Yes, you can embed external content by creating iframe and video elements on the canvas, allowing you to integrate interactive previews and media directly within your visual layout.

What is the best way to automatically generate a visual sitemap using a canvas?▼

Automatically generating a visual sitemap involves creating geometric boxes for each page, linking them with lines, and embedding preview iframes for each section directly on the canvas.

Does this canvas manipulation approach require any external dependencies or components?▼

No, this canvas manipulation approach operates without external dependencies or components, utilizing an internal coordinate system and state retrieval logic to manage visual elements natively.