skills.rest
LiuHarry1
LiuHarry1COMMUNITY
Explore all skills by this author →
GitHub

canvas

Create live visual canvases beside chat using the Cursor canvas SDK.

4|Updated Mar 14, 2026
Search Tags:#analytics#react#interactive#visualization#canvas#data-visualization
One-click install
npx skills add https://github.com/LiuHarry1/ai_coding_agent_intro --skill canvas-liuharry1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/LiuHarry1/ai_coding_agent_intro/tree/main/.ai-agent/skills/canvas
Command: npx skills add https://github.com/LiuHarry1/ai_coding_agent_intro --skill canvas-liuharry1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A Cursor Canvas is a live React app that the user can open beside the chat. It enables presenting standalone analytical artifacts—such as quantitative analyses, dashboards, data-heavy insights, or architecture reviews—with rich visuals instead of markdown tables or code blocks.

Core Features & Use Cases

  • Standalone visual artifacts: render charts, tables, timelines, and interactive explorations as a distinct canvas beside chat.
  • On-demand resources: load scripts/, references/, and assets/ to support deterministic tasks and contextual detail.
  • MCP-tool integration: ideal for results from Datadog, Databricks, Linear, Sentry, Slack, and other MCP tools where the data is the deliverable.

Quick Start

Open a canvas beside the chat and implement your analysis in a single .canvas.tsx file.

Frequently Asked Questions about canvas

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

FAQPage Schema
How do I render interactive data visualizations beside my chat?▼

To render interactive data visualizations beside your chat, you create a live React canvas using a .canvas.tsx entry point, which functions as a standalone analytical artifact powered by the Cursor canvas SDK.

What is a .canvas.tsx file used for in data analytics workflows?▼

A .canvas.tsx file is used to build standalone visual artifacts like dashboards and charts, replacing markdown tables with rich visuals that present data-heavy insights directly alongside your chat discussions.

Can I use MCP tool results from Datadog or Databricks to build a live dashboard?▼

Yes, you can use MCP tool results from Datadog, Databricks, Linear, or Sentry to build a live dashboard, as the canvas is specifically designed to integrate and present data deliverables from these tools.

How do I add supporting scripts and assets to a React canvas?▼

You add supporting scripts and assets to a React canvas by placing them in optional scripts/, references/, and assets/ directories, which load on-demand to provide deterministic tasks and contextual detail.

Does the canvas skill work without external dependencies?▼

Yes, the canvas skill works without external dependencies, allowing you to render live analytical artifacts using only the Cursor canvas SDK and your specified resource directories.

Related Skills

Explore More Data & Analytics Skills→
BabakBarBabakBar

Mobile Testing

Assess React Native testing requirements and configure Jest with React Native Testing Library.

Community
Intermediate
useatriumuseatrium
4

artifact-app-builder

Build browser-runnable interactive apps, dashboards, and visualizations as static artifacts.

Official
Intermediate
withcoralwithcoral
4

coral

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

Official
Advanced
nesihaver-ILnesihaver-IL

analytics-metrics

Build interactive analytics dashboards and charts in React with Recharts.

Community
Intermediate