canvas

Name: canvas
Availability: InStock
Author: Paul

Generate Cursor IDE canvases as .canvas.tsx components from analytical output.

Updated May 18, 2025

Search Tags:#data visualization #canvas #tables #cursor #workflow guidance #ide artifact

Ready to run

npx skills add https://github.com/nthpaul/dotfiles --skill canvas-nthpaul

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/nthpaul/dotfiles/tree/main/cursor/.cursor/skills-cursor/canvas
Command: npx skills add https://github.com/nthpaul/dotfiles --skill canvas-nthpaul

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you decide when to present AI output as its own standalone artifact in Cursor, and how to author a .canvas.tsx that the IDE can compile and display beside the chat.

Core Features & Use Cases

Canvas decision guidance: Uses user intent to determine whether output should live as a standalone artifact rather than remain chat text.
Canvas authoring workflow: Enforces correct placement, naming, and component/import rules so canvases are discoverable and reliably compile.
Quality and safety guardrails: Prevents empty/placeholder canvases, disallows prohibited UI patterns (like gradients or emojis), and requires self-labeling for charts/tables.
Use cases: Quantitative analyses with structured results, security/architecture reviews with categorized findings, cross-system overlap reports, and table-heavy outputs with real deliverable data.

Quick Start

Create a new .canvas.tsx file in the workspace canvases directory so Cursor can open your standalone analysis 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 display data visualization tables as a standalone artifact in Cursor IDE?▼

A standalone IDE canvas separates structured analytical output like tables and metrics breakdowns from chat text, allowing you to view and interact with deliverables directly within the Cursor workspace using a `.canvas.tsx` component.

When should I use a canvas artifact instead of chat text for structured deliverables?▼

You should use a canvas artifact instead of chat text for structured deliverables like quantitative analyses, categorized security findings, or cross-system overlap reports when the output is table-heavy and requires a dedicated, self-describing view with labels, legends, and source captions.

What are the requirements for importing data into a Cursor canvas component?▼

Requirements for importing data into a Cursor canvas component mandate that all data must be inline-only, explicitly disallowing any fetch or network calls, while ensuring the component renders non-empty UI with self-describing charts and tables.

Are there UI limitations when generating a canvas for metrics breakdowns in Cursor?▼

Yes, UI limitations when generating a canvas for metrics breakdowns prohibit empty or placeholder canvases and disallow prohibited UI patterns like gradients or emojis, requiring self-labeling elements such as labels, legends, and source captions for charts and tables.

How do I create a canvas file that Cursor can reliably compile and display?▼

To create a canvas file that Cursor can reliably compile and display, you enforce correct placement, naming, and component rules by authoring a `.canvas.tsx` file in the workspace canvases directory with exact managed path placement and correct SDK imports.