canvas

Create, manipulate, and embed shapes and iframes on a canvas interface.

Updated May 16, 2026

Search Tags:#canvas #ui design #iframe #visual development #shape manipulation

Ready to run

npx skills add https://github.com/ckrono-prog/Kotlin-Code-Builder --skill canvas-ckrono-prog

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/ckrono-prog/Kotlin-Code-Builder/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/ckrono-prog/Kotlin-Code-Builder --skill canvas-ckrono-prog

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of creating, reading, and manipulating visual elements on a canvas, providing a comprehensive solution for design exploration and UI previewing.

Core Features & Use Cases

Canvas Operations: Execute a variety of canvas operations including reading board state, placing shapes, and managing iframe lifecycles.
Shape Manipulation: Create, update, delete, move, resize, reorder, align, and distribute shapes on the canvas.
Iframe Management: Embed and manage iframes for live UI previews, ensuring a seamless design and development workflow.
Use Case: For a developer working on a web application, this Skill can be used to quickly mock up UI components, preview them in real-time, and iterate on the design.

Quick Start

Use the canvas skill to create a new rectangle shape at coordinates (100, 100) with a width of 200 units and a height of 100 units.

Frequently Asked Questions about canvas

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

FAQPage Schema

How do I create and manipulate shapes on a canvas interface for UI design?▼

To manipulate shapes on a canvas interface, you can create, update, resize, and align visual elements by specifying exact canvas coordinates and shape properties within your UI design workflow.

Can I embed iframes for live UI previews during visual development?▼

Yes, you can embed iframes on a canvas interface for live UI previews, managing iframe lifecycles to ensure a seamless visual development and iterative design process.

What is the best way to read and update the current board state of a canvas?▼

Reading and updating the board state of a canvas involves executing canvas operations to read current shape configurations and manipulate visual elements based on their exact coordinates.

Does canvas shape manipulation support reordering and aligning elements?▼

Yes, canvas shape manipulation supports reordering and aligning elements, allowing you to move, resize, and distribute visual elements precisely across the canvas interface.

Are there specific prerequisites for handling canvas coordinates and shape properties?▼

Handling canvas coordinates and shape properties requires an environment capable of executing canvas operations and managing iframe lifecycle states for real-time UI previews.

Why use a canvas interface for mocking up web application UI components?▼

Using a canvas interface for mocking up web application UI components allows developers to quickly place shapes, preview designs in real-time, and iterate on visual development workflows.