skills.rest
ferrarifankid04
ferrarifankid04COMMUNITY
Explore all skills by this author →
GitHub

canvas

Creates live React canvas apps in Cursor for standalone analytical artifacts.

Updated Aug 6, 2026
Search Tags:#data visualization#analytics#charts#react#canvas#cursor#tsx
One-click install
npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill canvas-ferrarifankid04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/ferrarifankid04/ai-skills-public/tree/main/cursor/skills-cursor/canvas
Command: npx skills add https://github.com/ferrarifankid04/ai-skills-public --skill canvas-ferrarifankid04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Chat responses with dense data — tables, metrics, audit findings — are hard to read as plain markdown. This Skill lets the agent render analytical output as a live React app (a .canvas.tsx file) that opens beside the chat in Cursor, turning raw data into charts, tables, and interactive layouts. ## Core Features & Use Cases - Standalone Analytical Artifacts: Renders quantitative analyses, billing investigations, security audits, and architecture reviews as dedicated visual canvases instead of markdown dumps. - Rich Component SDK: Provides typed primitives via cursor/canvas — BarChart, LineChart, PieChart, Table, Stat, Card, DiffView, UsageBar, form controls, and theme tokens — with full TypeScript declarations in sdk/. - Design Guardrails: Enforces flat, minimal styling (no gradients, emojis, or box-shadows), mandatory chart labeling, and a pre-delivery self-check to prevent low-quality output. - Use Case: After querying Datadog or Databricks via MCP tools, the agent renders the results as a labeled multi-series line chart with stats and tables in a canvas the user opens beside the chat. ## Quick Start Ask the agent to analyze your service error rates over the last week and present the findings as a canvas.

Frequently Asked Questions about canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a canvas in Cursor?▼

Write a single .canvas.tsx file to /Users/<user>/.cursor/projects/<workspace>/canvases/ using the write file tool. The file must default-export a React component, import only from cursor/canvas, and embed all data inline with no fetch calls.

When should I use a Cursor canvas instead of a markdown table?▼

Use a canvas when the output is a standalone analytical artifact such as quantitative analyses, audit findings, or MCP tool data where the data is the deliverable. Skip it for targeted debugging, code fixes, drafted messages, or work in a specific external tool.

What components are available in the cursor/canvas SDK?▼

The SDK exports BarChart, LineChart, PieChart, Table, Stat, Card, Callout, DiffView, UsageBar, TodoList, form controls like TextInput and Select, plus hooks like useHostTheme and useCanvasState. Full prop types are declared in the sdk/*.d.ts files.

Why is my Cursor canvas blank or not showing up?▼

The most common cause is the file not being written directly inside the workspace's managed canvases directory — subfolders and other locations are not detected. Re-save the .canvas.tsx file to the exact path rather than creating the directory manually.

Can a Cursor canvas fetch data from an API at runtime?▼

No. Canvases must embed all data inline and cannot use fetch, network calls, npm packages, or Node built-ins. The agent gathers data first (for example via MCP tools) and then writes it into the canvas file.

Does the canvas SDK support persistent state and theming?▼

Yes. useCanvasState persists values across rebuilds and IDE restarts via a sidecar file, and useHostTheme provides light/dark design tokens so colors match the host theme. Hardcoded hex colors are disallowed.

Related Skills

Explore More Data & Analytics Skills→
withcoralwithcoral
4

coral

Query live connected sources via Coral MCP to produce evidence-based answers.

Official
Advanced
JonnyCBBJonnyCBB

research-problem

Coordinate parallel sub-agent research and synthesize findings into a structured report.

Community
Advanced
ai-analyst-labai-analyst-lab
21

triangulation

Cross-reference findings across multiple data sources to validate conclusions.

Official
Basic
InnerScopeHearingInnerScopeHearing

datadog

Submit metrics, manage monitors and dashboards, and run synthetic uptime checks via Datadog.

Official
Advanced