canvas

Create and manipulate visual elements on a canvas.

Updated Mar 13, 2026
One-click install
npx skills add https://github.com/tann200/CodingAgent --skill canvas-tann200
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/tann200/CodingAgent/tree/main/tui/.local/skills/canvas
Command: npx skills add https://github.com/tann200/CodingAgent --skill canvas-tann200

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides the ability to create, position, and manipulate visual elements on a workspace canvas, enabling users to visualize and interact with complex data or design concepts.

Core Features & Use Cases

  • Shape Creation and Manipulation: Supports creation and manipulation of geometric shapes, text, notes, iframe embeds, images, and videos.
  • Read & Modify Canvas State: Read the current state of the canvas, including shapes' positions, types, and properties, and apply actions to modify it.
  • Use Case: Designing architectural layouts, planning software UI/UX, or creating interactive data visualizations.

Quick Start

Start the canvas skill to begin creating shapes on the canvas.

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 workspace canvas for UI design?

The canvas skill enables the creation and manipulation of geometric shapes, text, notes, and visual elements on a workspace canvas for UI design. You can read the current state, including positions and properties, and apply actions to modify the layout.

Can I embed web content like iframe embeds and videos into my data visualization canvas?

Yes, you can embed web content like iframe embeds and videos into your data visualization canvas. The canvas skill supports creating and manipulating these elements alongside geometric shapes, text, and images for interactive visual layouts.

What is the best way to align and distribute shapes when planning architectural layouts?

The best way to align and distribute shapes for architectural layouts is by using canvas state management to read current positions and apply modification actions. This workspace canvas skill supports precise positioning and manipulation of geometric visual elements.

Does the canvas skill support reading and modifying the current state of visual elements?

Yes, the canvas skill supports reading the current state of the canvas, including shapes' positions, types, and properties. You can then apply actions to modify the workspace, enabling dynamic data visualization and UI/UX design updates.

What types of visual elements can I position on a workspace canvas for interactive data visualization?

For interactive data visualization, you can position geometric shapes, text, notes, iframe embeds, images, and videos on a workspace canvas. The canvas skill enables creating and manipulating these visual elements for various applications.

Can I use the canvas skill for software UI/UX planning without external dependencies?

Yes, you can use the canvas skill for software UI/UX planning without external dependencies. It provides built-in shape creation, alignment, distribution, and web content embedding capabilities to visualize and interact with design concepts.