canvas

Solid

A Cursor Canvas is a live React app the user opens beside the chat. MUST use a canvas for standalone analytical artifacts — quantitative analyses, billing investigations, security audits, architecture reviews, data-heavy content, timelines, charts, tables, interactive explorations, repeatable tools, or any response that benefits from visual layout. Prefer canvas for MCP tool results (Datadog, Databricks, Linear, Sentry, Slack) over markdown tables or code blocks. MUST also read this skill when creating, editing, or debugging any .canvas.tsx file.

Web & Frontend 6 stars 0 forks Updated 2 days ago MIT

Install

View on GitHub

Quality Score: 81/100

Stars 20%
28
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

A canvas is a single `.canvas.tsx` file the IDE compiles so the user can open it beside the chat. Follow the workflow below in order. ## Workflow ### 1. Decide whether to use a canvas The trigger is **user intent**, not response shape. Ask: would the user benefit from viewing this output as its **own standalone artifact**, separate from the chat? If the output is a means to an end (a drafted message, a code fix, a dashboard in another tool), skip the canvas. **Use a canvas when the agent produces new standalone analytical output:** - Quantitative analyses and metrics breakdowns (e.g. "send 500 requests and tell me how many fail") - Billing or account investigations that surface structured findings from database queries - Security audits or architecture reviews with categorized findings - Cross-system data analyses and overlap reports - Structured data from MCP tools (Databricks, Datadog, etc.) where the data IS the deliverable - Financial analyses, margin decompositions, usage trend reports - Tables with more than a handful of rows that the user asked to see **Do NOT use a canvas when:** - The user asks for work in a **specific tool** — "create a Datadog dashboard" means give them a Datadog dashboard, not a canvas - The user has a **specific deliverable** — "draft a support response", "fix this code", "make this PR" - The user is **working within an existing artifact** — improving an HTML dashboard, editing an existing file - The user is doing **targeted debugging** or a...

Details

Author
kensaurus
Repository
kensaurus/cursor-kenji
Created
5 months ago
Last Updated
2 days ago
Language
JavaScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category