canvas

Create, manipulate, and retrieve visual elements on an infinite canvas.

Updated Jun 19, 2018
One-click install
npx skills add https://github.com/ouzayr/Utilities --skill canvas-ouzayr
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/ouzayr/Utilities/tree/main/DailyPlanner/.local/skills/canvas
Command: npx skills add https://github.com/ouzayr/Utilities --skill canvas-ouzayr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill allows for the creation, manipulation, and organization of visual elements on an infinite digital 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: Quickly lay out a user interface by creating placeholder boxes for different components, then updating them with actual iframes or images once they are ready.

Quick Start

Create a blue rectangle with the text "Hello World" at position 100, 100 with a width of 200 and height of 150.

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

To create and manipulate visual elements on a canvas, apply a series of actions that specify element type, coordinates, and dimensions for shapes, text, notes, iframes, images, and videos with detailed control over positioning and layering.

What visual elements can I add to an infinite workspace for UI prototyping?

An infinite workspace canvas supports geometric shapes, text, notes, iframes, images, and videos, enabling rapid UI prototyping by creating placeholder boxes that can be updated with actual iframes or images later.

Can I retrieve the current state and properties of shapes on the canvas?

Yes, you can retrieve the current canvas state, including shape positions, element types, and layout properties, to read and inspect visual elements before applying further modifications.

How do I resize, align, or distribute multiple shapes on a workspace?

Resize, align, or distribute shapes by applying a series of update actions to the canvas, modifying positioning and sizing properties to organize visual elements across the workspace.

Does this canvas tool require external dependencies for layout design?

No, this canvas tool requires no external dependencies to create, manipulate, and organize visual elements, operating independently to streamline the layout design process.

What is the best way to organize a user interface layout using placeholder boxes?

The best way to organize a UI layout is to create placeholder boxes for different components on the canvas, then update them with actual iframes or images once the real content is ready.