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

projectb-canvas

Create or edit standalone interactive .canvas.tsx artifacts using the cursor/canvas SDK.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It guides the creation and modification of interactive canvas files (.canvas.tsx) so agents produce correctly structured, themed, and self-contained visual artifacts instead of static reports or broken code. ## Core Features & Use Cases - Canvas authoring workflow: Decides when a canvas is appropriate, writes a single self-contained .canvas.tsx file importing only from cursor/canvas, and embeds all data inline with no network calls. - SDK component surface: Provides typed declarations for layout primitives (Stack, Grid, Card, Table), charts (BarChart, LineChart, PieChart), forms, diff views, DAG layout, and hooks like useCanvasState and useHostTheme. - Design quality rules: Enforces token-based theming, forbids gradients, emojis, box-shadows, and empty states, and requires labeled charts plus a pre-delivery self-check. - Use Case: Ask for an interactive service health dashboard; the agent writes a .canvas.tsx file with Stat cards, a status Table, and a BarChart using host theme tokens. ## Quick Start Ask the agent to create an interactive canvas dashboard showing your service status metrics as a .canvas.tsx file.

Frequently Asked Questions about projectb-canvas

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

FAQPage Schema
How do I create an interactive canvas file in the IDE?▼

Write a single .canvas.tsx file that default-exports a React component importing only from cursor/canvas. Embed all data inline, use built-in components like Stack, Card, and Table, and the IDE compiles it for viewing beside the chat.

What components are available in the cursor/canvas SDK?▼

The SDK exports layout primitives (Stack, Row, Grid, Card), typography (H1-H3, Text, Code), charts (BarChart, LineChart, PieChart), forms (TextInput, Select, Toggle), DiffView, UsageBar, TodoList, and hooks like useCanvasState and useHostTheme.

When should I use a canvas instead of a Markdown report?▼

Use a canvas only for standalone interactive artifacts or when editing an existing .canvas.tsx file. Static tables, comparisons, and ordinary reports should remain plain Markdown and do not require a canvas.

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

No. Canvas files must embed all data inline with no fetch or network calls, and may import only from cursor/canvas. Relative imports, npm packages, and Node built-ins are not allowed.

Why does my canvas appear blank or not get detected?▼

The most common cause is writing the file outside the managed canvases directory or using the wrong extension. Re-save the .canvas.tsx file to the exact expected location rather than creating directories manually.

How does canvas state persist across reloads?▼

The useCanvasState hook works like React.useState but stores values in a .canvas.data.json sidecar file next to the canvas source, so state survives rebuilds, reloads, and IDE restarts using stable string keys.

Related Skills

Explore More Software Engineering Skills→
dnzengoudnzengou

render-monitor

Monitor Render service health, performance metrics, logs, and resource usage.

Community
Intermediate
simonwjacksonsimonwjackson

se-proof

Render, share, and synchronize Markdown edits through Proof HITL review workflows.

Community
Advanced
framerslabframerslab

fact-grounding

Validate factual claims using semantic analysis and web fact-checking tools.

Official
Intermediate
iamasters-academyiamasters-academy
20

tool-visual-explainer

Convert Markdown content into standalone HTML5 web pages.

Official
Intermediate