canvas

Create, modify, and query visual shapes on an infinite canvas.

1|Updated Aug 24, 2025
One-click install
npx skills add https://github.com/Pixoraft/KirpalSecure-site --skill canvas-pixoraft
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/Pixoraft/KirpalSecure-site/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/Pixoraft/KirpalSecure-site --skill canvas-pixoraft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill allows for the creation, manipulation, and reading 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.
  • Canvas State Reading: Retrieve detailed information about shapes on the canvas, including their positions, types, and properties.
  • Shape Manipulation: Create, update, delete, move, resize, reorder, align, and distribute shapes.
  • Use Case: Quickly lay out a user interface mockup by creating rectangles for sections, adding text labels, and embedding placeholder images or iframes for dynamic content.

Quick Start

Create a blue rectangle with the text "Hello" 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 create visual elements on an infinite workspace canvas?

Create visual elements on an infinite workspace canvas by defining a coordinate system and specifying shape types like geometric figures, text, notes, images, iframes, and videos. You can dynamically generate and manipulate these shapes with detailed property management for layout and content embedding.

Does the canvas skill support embedding dynamic content like iframes and videos?

Yes, the canvas skill supports embedding dynamic content using iframe and video shape types. You can create, update, and query these visual elements alongside geometric shapes, text, and notes to build interactive layout mockups.

How do I read the state of shapes on a layout canvas?

Read canvas state by querying visual elements to retrieve detailed information about their positions, types, and properties. This allows you to inspect geometric shapes, text, notes, images, iframes, and videos currently placed on the infinite workspace.

What is the best way to lay out a user interface mockup on a workspace canvas?

The best way to lay out a UI mockup is by creating rectangles for sections, adding text labels, and embedding placeholder images or iframes. This dynamic creation and modification of visual elements streamlines the design process on an infinite canvas.