canvas

Create, read, and manipulate shapes on a canvas workspace with iframes.

Updated Feb 24, 2026

Search Tags:#canvas #iframe #shapes #ui-prototyping #mockup-sandbox #canvas-actions

Ready to run

npx skills add https://github.com/binan-maker/QRS --skill canvas-binan-maker

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This canvas skill provides a unified approach to create, read, and manipulate visual shapes on a workspace board, enabling quick previews using iframes and a variety of shapes, texts, notes, images, and videos.

Core Features & Use Cases

Create and manage shapes on a canvas, including iframes for live previews and components from mockups.
Read the current board state and control iframe lifecycles to ensure a responsive design workflow.
Build and prototype UI layouts by placing building placeholders before wiring up servers or components.

Quick Start

Place building placeholders on the canvas before wiring up servers or components.

Frequently Asked Questions about canvas

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

FAQPage Schema

How do I prototype a UI layout with live iframe previews before wiring up servers?▼

To prototype UI layouts with live iframe previews, place building placeholders on a canvas workspace to render static content and iframes. This approach lets you visualize designs and manage mockup-sandbox components before backend integration.

What is a canvas workspace for UI prototyping and how does it manage state?▼

A canvas workspace for UI prototyping is an environment to create, read, and manipulate visual shapes like texts, notes, images, and videos. It coordinates canvas state management and iframe lifecycles to maintain a responsive design workflow.

Can I embed external URLs in my mockup sandbox using iframes?▼

Yes, you can embed external URLs in your mockup sandbox using iframes. The canvas workspace supports safe embedding with https URLs, ensuring secure live previews and static content integration within your UI prototypes.

Does the canvas skill support action batching for manipulating multiple shapes?▼

Yes, the canvas skill supports action batching for manipulating multiple shapes. This functionality enables efficient updates to the canvas state, allowing you to coordinate bulk shape modifications and iframe lifecycle events simultaneously.

What are the limitations of using iframes for live UI previews on a canvas?▼

A limitation of using iframes for live UI previews is that safe embedding requires https URLs. Additionally, managing iframe lifecycles requires canvas state coordination to ensure the mockup sandbox remains responsive during rapid UI prototyping.