canvas

Create and update canvas shapes and iframe elements for live UI previews.

Updated Dec 25, 2025
One-click install
npx skills add https://github.com/Darsh20009/genmz-shop --skill canvas-darsh20009
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/Darsh20009/genmz-shop/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/Darsh20009/genmz-shop --skill canvas-darsh20009

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canvas-based workflows for visualizing UI by placing and manipulating shapes and iframes on an infinite board, enabling designers and developers to prototype live without code changes.

Core Features & Use Cases

  • Create and manage shapes (geo, text, notes) and iframe previews to compose UI layouts.
  • Read current board state, place building placeholders, and evolve layouts while keeping live previews in sync with an underlying mockup sandbox.
  • Use cases include rapid mockups, onboarding dashboards, and iterative design exploration.

Quick Start

Place building placeholders on the canvas before launching any mockups or content.

Frequently Asked Questions about canvas

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

FAQPage Schema
How do I create UI mockups with live iframe previews on a visual canvas?

To create UI mockups with live iframe previews, use a visual canvas to place building placeholders before launching content, then manipulate shapes and iframe elements across an infinite workspace to compose layouts iteratively.

What is the best way to prototype UI layouts without making code changes?

The best way to prototype UI layouts without code changes is using a visual canvas workspace that coordinates shapes and iframe elements, enabling designers and developers to compose and evolve UI layouts through live previews directly on an infinite board.

Can I embed iframe elements with https URLs in my design workflow?

Yes, you can embed iframe elements with https URLs in your design workflow. The canvas-based UI preview system enforces https URLs for iframes and supports lifecycle management across read and write canvas operations during building, modifying, and live states.

How do I keep live previews in sync when evolving mockup layouts on an infinite board?

To keep live previews in sync when evolving mockup layouts, the visual canvas reads the current board state, applies canvas actions to update shapes and iframe elements, and maintains synchronization with an underlying mockup sandbox throughout building, modifying, and live lifecycle states.

Does the canvas preview system require specific callbacks for managing shapes and iframes?

Yes, the canvas preview system enforces the availability of core callbacks including getCanvasState, applyCanvasActions, and focusCanvasShapes to manage shapes and iframe elements, while also addressing optional resources in scripts, references, and assets during read and write operations.