Generate Cursor IDE canvases as .canvas.tsx components from analytical output.
npx skills add https://github.com/nthpaul/dotfiles --skill canvas-nthpaul
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
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.
Create a new .canvas.tsx file in the workspace canvases directory so Cursor can open your standalone analysis beside the chat.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
oaustegardCreate interactive charts from uploaded data files using Vega-Lite.
nesihaver-ILBuild interactive analytics dashboards and charts in React with Recharts.
markmhendricksonMigrate legacy command configurations to Cursor's skills-based architecture.
LiuHarry1Create live visual canvases beside chat using the Cursor canvas SDK.
