One-click install
npx skills add https://github.com/kvm9-dev/susanoo --skill canvas-kvm9-dev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/kvm9-dev/susanoo/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/kvm9-dev/susanoo --skill canvas-kvm9-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the guesswork and manual effort of arranging UI-like visual content by giving you a structured way to create, inspect, and update positioned elements on an infinite workspace canvas.

Core Features & Use Cases

  • Read the canvas state: Inspect existing shapes (focused, blurry, clusters) with positions, sizes, IDs, and type-specific properties.
  • Apply canvas actions in batches: Create, update, delete, move, resize, reorder (z-index), align, and distribute shapes to match a desired layout.
  • Embed rich content: Place iframes (https only) plus images and videos (including local-to-canvas asset hosting) alongside geo shapes, text, and notes.
  • Use a safe layout workflow: Resolve iframe URLs, label embeds, and present the final result so shapes are discoverable.

Quick Start

Use the canvas skill to create labeled iframe shapes from real HTTPS URLs and then present all created or modified shapes.

Frequently Asked Questions about canvas

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

FAQPage Schema
How do I create and arrange visual layouts on an infinite canvas?

You can arrange visual layouts on an infinite canvas by reading existing shape positions and applying batched modifications. This approach manages geometric blocks, text, notes, and embedded iframe previews for precise page-like compositions.

Can I embed external website previews and media into a design mockup?

Yes, you can embed external website previews and media into a design mockup by placing HTTPS iframe URLs alongside images and videos. The canvas supports local-to-canvas asset hosting to integrate rich content within your workspace visualization.

What is the best way to align and distribute UI components in a workspace visualization?

The best way to align and distribute UI components is through batched canvas actions. You can create, move, resize, and reorder shapes with specific z-index adjustments to accurately match your desired geometric layout distribution.

Does canvas layout support iframe embedding for HTTP URLs?

Canvas layout does not support iframe embedding for HTTP URLs. Embedding rich content requires secure HTTPS iframe URLs to ensure safe website previews and component mockups are properly rendered within the workspace visualization.

How do I ensure updated shapes are visible after batched modifications?

To ensure updated shapes are visible after batched modifications, you must execute a final presentation command using all touched shapeIds. This deterministic workflow guarantees that created or modified elements are discoverable on the board.