canvas

Solid

Create a live React canvas beside chat for standalone analytical artifacts that benefit from visual layout: quantitative/security/ architecture analyses, data-heavy timelines/charts/tables, interactive explorations, or repeatable tools. Do not use for simple prose or code changes.

Web & Frontend 9 stars 0 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 82/100

Stars 20%
33
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
7 months ago
Last Updated
yesterday
Language
JavaScript
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category