skills.rest
kkkaoru
kkkaoruCOMMUNITY
Explore all skills by this author →
𝕏@kkk4oruGitHub

canvas

Creates standalone .canvas.tsx analytical artifacts rendered beside the Cursor IDE chat.

Updated Oct 15, 2019
Search Tags:#data visualization#analytics#charts#canvas#ide#cursor#tsx
One-click install
npx skills add https://github.com/kkkaoru/dotfiles --skill canvas-kkkaoru
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/kkkaoru/dotfiles/tree/main/.cursor/skills-cursor/canvas
Command: npx skills add https://github.com/kkkaoru/dotfiles --skill canvas-kkkaoru

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When an agent produces structured analytical output — metrics breakdowns, audit findings, query results — plain chat text is hard to scan and reuse. This Skill turns that output into a dedicated, self-contained visual artifact the user can open beside the chat in Cursor. ## Core Features & Use Cases - Decision workflow: Determines from user intent whether output deserves a standalone canvas or should stay in chat, avoiding unnecessary artifacts. - Canvas authoring rules: Enforces a single .canvas.tsx file written to the managed ~/.cursor/projects/<workspace>/canvases/ directory, importing only from cursor/canvas with all data embedded inline. - Design system guidance: Provides a full SDK reference (charts, tables, cards, stats, diffs, forms, usage bars) plus anti-slop rules — no gradients, emojis, box shadows, or empty states — and a pre-delivery self-check. - Use Case: After querying Datadog for API error rates by service over the last 7 days, generate a labeled line chart canvas with source and time-range captions that the user opens next to the conversation. ## Quick Start Ask the agent to analyze recent API error rates and present the findings as a canvas you can open 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 ~/.cursor/projects/<workspace>/canvases/ using the write file tool. The IDE only detects files in that exact directory, and the file must default-export a component importing only from cursor/canvas.

When should agent output become a canvas instead of chat text?▼

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

What components does the cursor/canvas SDK provide?▼

The SDK exports layout primitives (Stack, Row, Grid), typography, Card, Table, Stat, Callout, BarChart, LineChart, PieChart, DiffView, UsageBar, form controls, and hooks like useHostTheme and useCanvasState, all declared in the sdk/*.d.ts files.

Can a canvas fetch data from an API or use npm packages?▼

No. All data must be embedded inline in the .canvas.tsx file, and imports are restricted to cursor/canvas only. Network calls, npm packages, Node built-ins, and relative imports are not allowed.

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

The most common cause is the file not being written directly under ~/.cursor/projects/<workspace>/canvases/. Re-save it to that exact path; subfolders and alternate extensions are not detected. The Canvas TypeScript check line reports diagnostics.

Related Skills

Explore More Software Engineering Skills→
ferrarifankid04ferrarifankid04

canvas

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

Community
Advanced
canva-sdkscanva-sdks
56

canva-branded-presentation

Generate on-brand Canva presentations from outlines or briefs.

Official
Intermediate
stephendorstephendor
1

tda-visualisation-and-diagramming

Validate and categorize academic paper figures with provenance tracking.

Community
Advanced
openaiopenai
488

report-to-pdf

Converts static HTML analytics-report exports to verified PDFs via headless Chrome with provenance metadata.

Official
Advanced