canvas
Spec compliantcanvas skill produces standalone React Canvas apps for analyses, audits, timelines, and interactive explorations beside the chat.
Create rich analytical Canvas artifacts with React for data-heavy outputs.
Copy prompt for your AI
Send this to your agent to install the skill.
First read https://skill123.app/install/skill123.md. Then install the "canvas" agent skill by running:
npx skills add https://github.com/cursor/skills-cursor/tree/main/canvasOther install methods
CLI install
npx skills add https://github.com/cursor/skills-cursor/tree/main/canvasManual install
~/.cursor/skills/canvas/When to use
- → Data-heavy analysis output
- → Interactive reports
- → Architecture reviews with visuals
Platforms
Resources
Source
https://github.com/cursor/skills-cursor/canvasRelated Skills
frontend-design produces polished, non-generic UI with intentional typography, color, and motion. Install with npx skills add vercel-labs/agent-skills --skill frontend-design.
web-design-guidelines encodes Vercel design standards for spacing, typography, accessibility, and performance in agent workflows.
Stageshow helps agents make faux product UI stills, cursor demos, and bento grids (benjitaylor/skills, MIT). Install: `npx skills add benjitaylor/skills --skill stageshow`.
baoyu-cover-image generates 公众号 / article covers across type, palette, rendering, text, and mood (JimLiu/baoyu-skills). Install with `npx skills add jimliu/baoyu-skills --skill baoyu-cover-image`.
FAQ
How do I install canvas?
Send the install prompt to your AI, or run npx skills add https://github.com/cursor/skills-cursor/tree/main/canvas.
Which platforms support canvas?
Cursor