skills.rest
ckrono-prog
ckrono-progCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/ckrono-prog/Kotlin-Code-Builder --skill canvas-ckrono-prog
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
patriotnewsactivismpatriotnewsactivism
2

canvas

Create, manipulate, and query visual elements on a digital canvas.

Community
Intermediate
koya-altkoya-alt

canvas

Create, update, and arrange visual shapes on an infinite canvas.

Community
Intermediate
KhaledMKhaledKhaledMKhaled

mockup-sandbox

Renders web UI mockup components live on canvas via isolated preview routes and iframes.

Community
Advanced
soq123soq123

canvas

Create, read, and manipulate shapes on a workspace canvas for UI mockups.

Community
Intermediate