What problem does it solve? When an agent produces data-heavy analytical results — metrics breakdowns, security audits, billing investigations, MCP tool output — dumping them into markdown tables or code blocks loses clarity. This Skill renders those results as a live, interactive React canvas beside the chat in Cursor. ## Core Features & Use Cases - Decision guidance: Clear rules for when a standalone canvas artifact is appropriate versus when plain chat output, a specific tool deliverable, or targeted debugging is the right answer. - Canvas authoring workflow: Instructions for writing a single .canvas.tsx file in the managed canvases/ directory, importing only from cursor/canvas, embedding data inline, and default-exporting one component. - Design system enforcement: A full SDK of typed components (Stack, Grid, Card, Table, Stat, charts, diff views, forms, DAG layout) plus theme tokens via useHostTheme(), with explicit anti-slop rules banning gradients, emojis, box-shadows, and walls of identical cards. - Use Case: After querying Datadog and Databricks via MCP tools, render the service health metrics, latency trends, and error breakdowns as a rich canvas with Stat grids, line charts, and status tables instead of a markdown dump. ## Quick Start Ask the agent to analyze recent service errors from your MCP tools and present the findings as a canvas.
