skills.rest
AmirEmad11
AmirEmad11COMMUNITY
Explore all skills by this author →
GitHub

canvas

Create, read, and manipulate shapes and iframe previews on a workspace canvas.

Updated Apr 20, 2026
Search Tags:#layout#canvas#iframe#mockup#shapes#whiteboard#ui preview
One-click install
npx skills add https://github.com/AmirEmad11/instabot --skill canvas-amiremad11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/AmirEmad11/instabot/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/AmirEmad11/instabot --skill canvas-amiremad11

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Managing a shared visual workspace requires programmatic control over shapes, layouts, and live UI previews. This Skill provides structured callbacks to read board state, place and update shapes, and manage the lifecycle of embedded iframe previews without manual positioning. ## Core Features & Use Cases - Board State Reading: Query the canvas with getCanvasState to inspect shapes, positions, and properties at multiple detail levels, including focused regions via focus areas. - Shape Manipulation: Create, update, delete, move, resize, reorder, align, and distribute geo shapes, text, notes, images, videos, and iframes through batched applyCanvasActions calls. - Iframe Lifecycle Management: Place building placeholders before writing code, then transition iframes to live state with resolved https URLs, integrating with the mockup-sandbox skill for isolated component previews. - Use Case: When asked to mock up a dashboard, immediately place building iframe placeholders on empty canvas space, set up the preview server, then update each iframe to live with its component URL and present the result. ## Quick Start Ask the assistant to read the current canvas state and place a building iframe placeholder for a new landing page mockup in an empty area of the board.

Frequently Asked Questions about canvas

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

FAQPage Schema
How do I place a live UI preview on the canvas?▼

Create an iframe shape with state set to building first, then update it to live with the resolved https URL once the component is ready. Use the mockup-sandbox skill to generate isolated component preview URLs on port 8000.

How do I read what shapes are on the canvas?▼

Call getCanvasState via code_execution to retrieve focusedShapes, blurryShapes, peripheralClusters, a summary, and the current viewport. Pass an optional focusArea with x, y, w, h to get full detail for a specific region.

Why does my iframe show a blank page on the canvas?▼

Iframe URLs must use https, and external sites with X-Frame-Options DENY or restrictive CSP headers will render blank. Replit dev server URLs resolved from the REPLIT_DOMAINS environment variable embed correctly.

Can I embed the main app URL for component previews?▼

No, the main app URL shows the entire application with navigation and routing rather than an isolated component. Use the mockup-sandbox preview server and embed URLs in the form /preview/{folder}/{ComponentName} instead.

What canvas actions can be batched together?▼

applyCanvasActions accepts create, update, delete, move, resize, reorder, align, and distribute actions in one ordered atomic batch. Always call getCanvasState first to find empty space and existing shape IDs.

Related Skills

Explore More Design & Creative Skills→
koya-altkoya-alt

mockup-sandbox

Render live web UI components in iframes via an isolated Vite dev server.

Community
Advanced
Exocore-OrganizationExocore-Organization
5

canvas

Coordinate and preview UI layouts using iframe-backed shapes on a canvas.

Official
Advanced
tamnguyentommy-rgbtamnguyentommy-rgb
2

mockup-extract

Extract UI components into a mockup sandbox with a /preview route.

Community
Intermediate
zocomputerzocomputer
45

threejs-animation

Create and play Three.js 3D animations using AnimationClip, AnimationMixer, and AnimationAction.

Official
Advanced