Create, update, and arrange visual shapes on an infinite canvas.
npx skills add https://github.com/koya-alt/Catalyst --skill canvas-koya-alt
Please help me install this Agent Skill. Skill: canvas Source: https://github.com/koya-alt/Catalyst/tree/main/local/skills/canvas Command: npx skills add https://github.com/koya-alt/Catalyst --skill canvas-koya-alt
The canvas skill removes the friction of manually arranging visual elements by providing programmatic create, read, and update operations for an infinite workspace, enabling reproducible layouts and embedded live previews.
Place an iframe preview named preview-1 at x 0 y 0 with size 1280x720 using a resolved https URL and set componentName to "App Preview".
High-intent search queries and answers about installing and using this skill.
You can build UI mockups on an infinite canvas by using apply_canvas_actions to create, update, and arrange visual shapes like geo, text, and iframe elements with deterministic shapeId assignments.
Yes, you can embed live component previews in your layout by placing iframe shapes that enforce HTTPS URLs, allowing you to render external web applications directly on the canvas.
To update multiple visual elements atomically during a design review, you can use batched apply_canvas_actions, ensuring all shape modifications like moving, resizing, and reordering succeed or fail together.
The best way to read visual elements in a focus area is to query the canvas using the focus_area parameter, which limits scope and returns contents at detail levels like focusedShapes and peripheralClusters.
Yes, the canvas skill supports layout planning with local images and videos by placing media files stored in the .canvas/assets directory, alongside external image and video URLs.
To ensure deterministic creation of shapes on the workspace canvas, you must provide an explicit shapeId assignment when executing create operations, preventing duplicate or random identifier conflicts.
ItsJupiter000Read canvas state and create, update, move, resize, or delete shapes.
shekerkammaGenerate multiple UI design variants from a creative brief.
Kirankumar2604Manage iframe-based UI previews and align shapes on an infinite canvas.
mikeyfennelly1Implement advanced React Flow patterns for nested nodes, custom edges, and undo/redo.
