Canvas Design
Generates responsive website canvas designs based on text prompts, prioritizing usability and modern aesthetic trends.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add davila7-canvas-design npx -- -y @trustedskills/davila7-canvas-design
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"davila7-canvas-design": {
"command": "npx",
"args": [
"-y",
"@trustedskills/davila7-canvas-design"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
The davila7-canvas-design skill enables AI agents to create and manipulate HTML5 Canvas elements for frontend development. It provides tools for drawing shapes, adding text, applying styles, and exporting canvas content as images or data URLs.
When to use it
- Designing interactive visual components like charts or diagrams in web applications.
- Generating dynamic graphics based on user input or real-time data.
- Exporting canvas content for use in emails, reports, or social media posts.
Key capabilities
- Drawing shapes (rectangles, circles, paths).
- Adding and styling text on the canvas.
- Applying colors, gradients, and shadows.
- Exporting canvas as PNG or JPEG images.
Example prompts
- "Draw a pie chart with three sections labeled 'A', 'B', and 'C'."
- "Create a canvas with a gradient background and centered text saying 'Welcome!'"
- "Export the current canvas content as a PNG image data URL."
Tips & gotchas
- Ensure that the AI agent has access to a browser environment for rendering the canvas.
- Be mindful of performance when working with large or complex canvases.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.