skills.rest
Pranil9699
Pranil9699COMMUNITY
Explore all skills by this author →
WebsiteGitHub

canvas

Inspect and modify canvas shapes using get_canvas_state and apply_canvas_actions.

Updated Mar 31, 2026
Search Tags:#layout#interaction#canvas#prototype#visual-design#iframe#shape-management
One-click install
npx skills add https://github.com/Pranil9699/Payroll-Employment-System --skill canvas-pranil9699
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/Pranil9699/Payroll-Employment-System/tree/main/.local/skills/canvas
Command: npx skills add https://github.com/Pranil9699/Payroll-Employment-System --skill canvas-pranil9699

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Canvas Skill streamlines visual workspace management by enabling you to read and manipulate shapes on an infinite canvas, reducing manual layout effort and enabling rapid prototyping.

Core Features & Use Cases

  • Read the current board state with get_canvas_state to understand shapes, positions, and properties.
  • Modify the board with apply_canvas_actions to create, update, delete, move, resize, or reorder shapes.
  • Support for shape types geo, text, note, iframe, image, and video with associated properties for each type.
  • Use cases include laying out UI mockups, annotating ideas, embedding live previews, and iterating on spatial arrangements.

Quick Start

Create and position shapes on the canvas to prototype layouts quickly.

Frequently Asked Questions about canvas

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

FAQPage Schema
How do I programmatically manage canvas shapes for visual layouts?▼

To manage canvas shapes programmatically, you can read the current board state with get_canvas_state and modify it using apply_canvas_actions to create, move, resize, or delete shapes. This automates layout tasks and rapid prototyping.

What shape types are supported for spatial arrangement on an infinite canvas?▼

Canvas shape management supports geo, text, note, iframe, image, and video types. Each shape type includes specific properties and coordinate system support for precise spatial arrangement and UI mockup creation.

Can I embed live previews using an iframe on a prototyping canvas?▼

Yes, you can embed live previews by creating and positioning iframe shapes on the canvas. The apply_canvas_actions endpoint supports iframe as a native shape type, allowing interactive content integration within visual layouts.

Do I need specific endpoints to automate canvas shape management?▼

Yes, automating canvas shape management requires the get_canvas_state endpoint to inspect current shapes and the apply_canvas_actions endpoint to programmatically modify their properties and positions on the board.

What's the best way to iterate on UI mockup layouts without manual dragging?▼

The best way to iterate on UI mockup layouts without manual dragging is by programmatically updating shape properties and coordinates via apply_canvas_actions, enabling rapid spatial arrangement adjustments and prototyping.

Are there limitations when using optional assets for advanced canvas workflows?▼

The canvas skill supports optional assets for advanced workflows alongside standard shape types. Limitations depend on the specific properties supported by each shape type and the coordinate system constraints within the infinite canvas.

Related Skills

Explore More Design & Creative Skills→
rezosndrezosnd

canvas

Read and modify canvas shapes via get_canvas_state and apply_canvas_actions.

Community
Intermediate
shahmirerrorshahmirerror

canvas

Create, read, and manipulate shapes on an infinite canvas.

Community
Intermediate
KartikSharma4448KartikSharma4448

canvas

Create, read, and manipulate shapes on an infinite workspace canvas.

Community
Intermediate
anderskevanderskev
75

react-flow-advanced

Implement advanced React Flow graphs with sub-flows, custom connections, and undo/redo.

Community
Advanced