canvas-design
Create beautiful visual art and designs programmatically.
Developer Setup
Setup & Installation
npx skills add https://github.com/anthropics/skills --skill canvas-designnpx skills add https://github.com/anthropics/skills --skill canvas-designOverview
What This Skill Does
Creates high-fidelity visual layouts, interfaces, and vector shapes using HTML Canvas and SVG. It provides robust tools for rendering, styling, and animating custom geometric assets.
Application
When to use this Skill
- Designing high-performance graphical interfaces in browser canvas
- Drawing complex custom shapes, paths, and vector icons
- Building dynamic charts, graphs, and rendering engines
- Implementing low-level image operations and canvas filters
- Creating interactive visual games and custom user controls
Documentation
Show Skills.md file
These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.
Complete this in two steps:
- Design Philosophy Creation (.md file)
- Express by creating it on a canvas (.pdf file or .png file)
First, undertake this task:
DESIGN PHILOSOPHY CREATION
To begin, create a VISUAL PHILOSOPHY (not layouts or templates) that will be interpreted through:
- Form, space, color, composition
- Images, graphics, shapes, patterns
- Minimal text as visual accent
THE CRITICAL UNDERSTANDING
- What is received: Some subtle input or instructions by the user that should be taken into account, but used as a foundation; it should not constrain creative freedom.
- What is created: A design philosophy/aesthetic movement.
- What happens next: Then, the same version receives the philosophy and EXPRESSES IT VISUALLY - creating artifacts that are 90% visual design, 10% essential text.
Consider this approach:
- Write a manifesto for an art movement
- The next phase involves making the artwork
The philosophy must emphasize: Visual expression. Spatial communication. Artistic interpretation. Minimal words.
Recommendations
Explore other random skills
auth0-react
Use when adding authentication to React applications (login, logout, user sessions, protected routes) - integrates @auth0/auth0-react SDK for SPAs with Vite or Create React App
auth0-react-native
Use when adding authentication to React Native or Expo mobile apps (iOS/Android) with biometric support - integrates react-native-auth0 SDK with native deep linking
auth0-spa-js
Use when adding authentication to Vanilla JS, Svelte, or any framework-agnostic single-page applications - integrates @auth0/auth0-spa-js SDK for SPAs without framework-specific wrappers