← ClaudeAtlas

canvaslisted

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.
kensaurus/cursor-kenji · ★ 4 · Web & Frontend · score 80
Install: claude install-skill kensaurus/cursor-kenji
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