canvas

Create and manipulate shapes and iframes on an infinite canvas.

Updated Jun 30, 2026
One-click install
npx skills add https://github.com/not-subhu/screech --skill canvas-not-subhu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/not-subhu/screech/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/not-subhu/screech --skill canvas-not-subhu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires canvas-api, iframe-api, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a platform to create, position, and manipulate visual elements on an infinite canvas, enabling users to design and interact with visual content efficiently.

Core Features & Use Cases

  • Shape Manipulation: Create and manage shapes including rectangles, ellipses, text, notes, images, and videos.
  • Iframe Embedding: Embed live web content or static media as iframes.
  • State Management: Manage the lifecycle of iframes (e.g., setting the state to 'building' or 'live').
  • Use Case: Imagine you are designing a user interface. Use this Skill to place iframes for different views or insert text notes and images to convey your design ideas.

Quick Start

Create an iframe on the canvas at coordinates (50, 50) with a width of 300 and a height of 200.

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 visual elements on an infinite canvas?▼

To manipulate visual elements on an infinite canvas, you can create, position, and manage shapes like rectangles, ellipses, text, notes, images, and videos using the canvas API. This provides an efficient platform for designing interactive visual content.

Can I embed live web content and media as iframes on a canvas?▼

Yes, you can embed live web content and static media as iframes on the canvas. The iframe API allows you to embed external web pages or media directly into your visual design workspace alongside standard shapes.

How do I manage the lifecycle state of iframes during visual design?▼

Managing the lifecycle state of iframes involves setting their status to 'building' during creation or 'live' when published. This state management mechanism controls the iframe's behavior and visibility on the canvas.

Do I need canvas API and iframe API dependencies to manipulate shapes?▼

Yes, manipulating shapes and embedding web content requires the canvas API for element positioning and the iframe API for handling web content embedding. These dependencies provide the necessary mechanisms for visual element lifecycle management.

What is the best way to position text notes and images on a visual canvas?▼

The best way to position text notes and images on a visual canvas is by using the canvas manipulation API to define exact coordinates and dimensions. This allows precise placement of shapes and media within your user interface design.

Why use an infinite canvas for user interface design over standard layout tools?▼

Using an infinite canvas for user interface design allows unrestricted spatial organization of elements like text, images, and iframes. Unlike standard layout tools, it provides a boundless workspace to freely position and manage visual components.