canvas

Create and modify shapes and embed live web content via iframes on a workspace canvas.

Updated Apr 8, 2026

Search Tags:#canvas #UI design #shape manipulation #iframe embedding #UI preview

Ready to run

npx skills add https://github.com/Buntyarora97/bcshdbchjdb --skill canvas-buntyarora97

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/Buntyarora97/bcshdbchjdb/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/Buntyarora97/bcshdbchjdb --skill canvas-buntyarora97

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill simplifies the process of creating, manipulating, and managing UI previews and live content on an infinite canvas, enabling designers and developers to efficiently layout and interact with UI components.

Core Features & Use Cases

Canvas Operations: Read board state, place shapes, and manage iframe lifecycles.
Shape Creation: Support for various shapes including rectangles, ellipses, text, notes, images, and videos.
Iframe Management: Embed live web content using iframes with state management for building, modifying, and live previews.
Use Case: Designers can create a mockup of a website's UI, placing components on the canvas and embedding the live URL of each component for immediate preview.

Quick Start

Create a new rectangle shape on the canvas and set its properties.

Frequently Asked Questions about canvas

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

FAQPage Schema

How do I create UI previews on an infinite canvas?▼

To create UI previews on an infinite canvas, you can place geometric shapes, text, notes, images, and videos, then embed live web content via iframes to interact with UI components.

Can I embed live web content using iframes for UI mockups?▼

Yes, you can embed live web content using iframes for UI mockups. The canvas supports iframe lifecycle management, allowing you to build, modify, and preview live URLs directly on the workspace.

What shapes can I manipulate for UI design on the canvas?▼

For UI design on the canvas, you can manipulate various shapes including rectangles, ellipses, text, notes, images, and videos to efficiently layout and manage UI components.

Do I need mockup-sandbox to embed iframe content on the canvas?▼

Yes, you need mockup-sandbox to embed iframe content on the canvas. The iframe management for state management and live previews requires coordination with the mockup-sandbox component.

How do I read board state and manage shapes during canvas operations?▼

To read board state and manage shapes during canvas operations, the skill provides canvas manipulation features that allow you to read the current state, place new shapes, and manage the lifecycle of embedded iframes.

Are there limitations when modifying iframe state for live website previews?▼

When modifying iframe state for live website previews, operations are constrained to the workspace canvas environment and depend on coordination with mockup-sandbox to successfully build and modify embedded live content.