skills.rest
steveulrich
steveulrichCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

canvas

Generates standalone React canvas artifacts for analytical output in Cursor IDE.

Updated May 28, 2023
Search Tags:#data visualization#React#dashboard#canvas#ide#Cursor#tsx
One-click install
npx skills add https://github.com/steveulrich/ProjectB --skill canvas-steveulrich
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/steveulrich/ProjectB/tree/main/.cursor/skills/canvas
Command: npx skills add https://github.com/steveulrich/ProjectB --skill canvas-steveulrich

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When an agent produces data-heavy analytical results, dumping them into markdown tables or code blocks in chat makes them hard to read and reuse. This Skill renders those results as a live React app (.canvas.tsx file) that opens beside the chat in Cursor, giving structured findings a dedicated visual surface. ## Core Features & Use Cases - Canvas Authoring Workflow: Decides when a canvas is appropriate, writes a single self-contained .canvas.tsx file to the managed canvases directory, and enforces file rules (imports only from cursor/canvas, inline data, no network calls). - Design System Guidance: Provides a full SDK of components (charts, tables, stats, cards, diffs, forms, DAG layouts) with theme tokens, plus explicit anti-slop rules banning gradients, emojis, and box shadows. - Use Case: After querying Datadog or Databricks via MCP tools, render the resulting metrics as a labeled multi-series line chart with stats and a findings table in a canvas instead of pasting raw rows into chat. ## Quick Start Ask the agent to analyze the attached service metrics and present the results as a canvas beside the chat.

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 IDE?▼

Write a single .canvas.tsx file into the workspace's managed canvases directory under ~/.cursor/projects/<workspace>/canvases/. The IDE detects and compiles it automatically; subfolders or other locations are not picked up.

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

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

What components can I import in a .canvas.tsx file?▼

Only imports from cursor/canvas are allowed: layout primitives (Stack, Grid, Row), typography, Card, Table, Stat, charts (BarChart, LineChart, PieChart), DiffView, form controls, and hooks like useHostTheme and useCanvasState. No npm packages or relative imports.

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

No. All data must be embedded inline in the .canvas.tsx file; fetch() and network calls are forbidden. If the underlying data is missing, do not produce a canvas—ask the user for the data instead.

Why does my canvas appear blank or missing in Cursor?▼

The most common cause is the file not being written directly inside the managed canvases directory with the exact .canvas.tsx extension. Re-save it to the correct path rather than creating the directory manually.

What styling rules apply to canvas components?▼

All colors must come from useHostTheme() tokens with no hardcoded hex values. Gradients, emojis, box shadows, rainbow coloring, and walls of identical cards are forbidden; canvases should be flat, minimal, and hierarchically organized.

Related Skills

Explore More Software Engineering Skills→
ArangoGutierrezArangoGutierrez
3

canvas

Creates standalone React canvas artifacts in Cursor IDE for analytical and data-heavy output.

Community
Intermediate
PeiwvyPeiwvy

json-canvas

Generate and edit JSON Canvas documents with nodes and edges per Spec 1.0.

Community
Intermediate
jonnytacos8jonnytacos8

sanity-check

Validate financial figures and cross-check totals against rag_search context.

Community
Intermediate
hashimichehashimiche
29

vault-obs

Manage Vault observability artifacts with idempotent hal vault obs commands.

Community
Intermediate