skills.rest
Gundlapuriswathiii006
Gundlapuriswathiii006COMMUNITY
Explore all skills by this author →
GitHub

canvas

Create, update, and manipulate shapes and iframes on a canvas.

Updated Jul 8, 2026
Search Tags:#diagramming#canvas#iframe#shape manipulation#ui mockup
One-click install
npx skills add https://github.com/Gundlapuriswathiii006/AI_TICKET_SYSTEM_TEAM --skill canvas-gundlapuriswathiii006
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/Gundlapuriswathiii006/AI_TICKET_SYSTEM_TEAM/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/Gundlapuriswathiii006/AI_TICKET_SYSTEM_TEAM --skill canvas-gundlapuriswathiii006

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides the ability to create, read, and manipulate shapes on the canvas, making it easier to visualize and manage UI elements, mockups, and diagrams.

Core Features & Use Cases

  • Shape Manipulation: Create, update, delete, move, resize, reorder, align, and distribute shapes on the canvas.
  • Iframe Management: Embed and manage iframes for live web content and components.
  • Canvas State: Retrieve and manipulate the state of the canvas, including shapes and their properties.
  • Use Case: Visualize a mockup of a web application, place and manage iframes for live components, or create diagrams and annotations.

Quick Start

Use the canvas skill to create a rectangle at position (100, 100) with width 200 and height 150.

Frequently Asked Questions about canvas

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

FAQPage Schema
How do I create and manipulate shapes on a canvas for UI mockups?▼

You can create and manipulate canvas shapes by using actions to create, update, delete, move, resize, reorder, align, and distribute elements for UI mockups. This allows you to easily visualize and manage design elements.

Can I embed live web content using iframes on the canvas?▼

Yes, you can embed and manage iframes on the canvas for live web content and components. This iframe management capability allows you to place and interact with live elements directly within your design exploration.

What's the best way to manage canvas state when building diagrams?▼

The best way to manage canvas state for diagrams is to use functions that retrieve and manipulate the current canvas state, including all shapes and their properties. This ensures your diagramming annotations remain accurate.

Does this canvas approach support aligning and distributing elements for design exploration?▼

Yes, this approach supports design exploration by providing specific canvas actions to align and distribute shapes. You can precisely reorder and resize elements to visualize a mockup of a web application.

Why would I need iframe management alongside shape manipulation in diagramming?▼

You need iframe management alongside shape manipulation to combine static diagramming elements with live web content. This allows you to place and manage iframes for live components directly within your canvas state.

Related Skills

Explore More Design & Creative Skills→
ItsJupiter000ItsJupiter000

canvas

Read canvas state and create, update, move, resize, or delete shapes.

Community
Intermediate
inbharataiinbharatai
22

canvas-design

Design and render graphics on HTML5 Canvas with JavaScript.

Community
Intermediate
Devvraj10Devvraj10

canvas

Create, read, update, and delete shapes on a canvas.

Community
Advanced
KhaledMKhaledKhaledMKhaled

canvas

Create and update canvas shapes with precise coordinates and sizing.

Community
Intermediate