Verified:GitHub

canvas-design

Draw shapes, images, and styled text on HTML Canvas.

1|Updated Nov 23, 2025

Search Tags:#data visualization #web development #javascript #animation #visual composition #html canvas #graphics design

One-click install

npx skills add https://github.com/zmre/nix-pai --skill canvas-design-zmre

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: canvas-design
Source: https://github.com/zmre/nix-pai/tree/main/claude/skills/canvas-design
Command: npx skills add https://github.com/zmre/nix-pai --skill canvas-design-zmre

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

Programmatically generating complex visual designs and graphics using HTML Canvas can be intricate and require detailed coding. This skill simplifies the process, providing tools and guidance for drawing shapes, manipulating images, and applying text styles to create dynamic compositions efficiently.

Core Features & Use Cases

Shape & Image Manipulation: Draw and transform shapes, and integrate images onto the canvas for rich visuals.
Text Styling: Apply various fonts, sizes, and colors to text elements for custom typography.
Dynamic Visual Compositions: Create animated or interactive graphics for web applications, enhancing user engagement.
Use Case: You need to generate a custom data visualization for a web dashboard. Use this skill to programmatically draw charts, add labels, and apply dynamic styling using HTML Canvas, ensuring a unique and interactive display.

Quick Start

Use the canvas-design skill to draw a red circle with a 50-pixel radius at the center of a 400x300 canvas.