Render interactive React canvases beside chat for data visualizations.
npx skills add https://github.com/PandelisZ/skills --skill canvas-pandelisz
Please help me install this Agent Skill. Skill: canvas Source: https://github.com/PandelisZ/skills/tree/main/skills/canvas Command: npx skills add https://github.com/PandelisZ/skills --skill canvas-pandelisz
Collaborative AI assistants often produce textual outputs that lack the clarity of visual data representations; this skill enables rendering live, interactive canvases beside the chat to visualize data and analyses.
Create a new file named my-art.canvas.tsx and implement a React component using the canvas SDK to render an interactive visualization beside the chat.
High-intent search queries and answers about installing and using this skill.
To visualize data from chat outputs, you can render live, interactive React canvases directly beside the conversation. This approach uses built-in canvas primitives and token-guided styling to present quantitative findings and dashboards without external tools.
Yes, you can render interactive React dashboards from MCP tool outputs. The skill processes data-heavy inputs from tools like Datadog or Databricks to generate rich visual artifacts, such as code review dashboards and architecture diffs, directly in the chat interface.
The best way to create interactive data visualizations without external dashboards is implementing reusable React components using a canvas SDK. This method relies on host theme tokens and built-in primitives to ensure accessible, consistent visuals alongside your chat.
To set up a React canvas component for data analysis, create a new file named my-art.canvas.tsx. You then implement a React component using the canvas SDK to render your interactive visualization beside the chat.
Yes, this canvas visualization approach works with custom theme tokens. It relies on host theme tokens and built-in canvas primitives to ensure safe visuals, maintaining accessible and consistent styling across all rendered data analyses and dashboards.
When rendering live canvases for quantitative analyses, you are limited to built-in canvas primitives and host theme tokens. The skill includes a pre-delivery self-check workflow to ensure safe visuals, but relies entirely on the host environment's supported styling and rendering capabilities.
jeremylongshoreAutomate deployment of Prometheus, Grafana, and Datadog monitoring stacks.
gracefullightGenerate interactive Plotly visualizations for data analysis and reporting.
oaustegardCreate interactive charts from uploaded data files using Vega-Lite.
nesihaver-ILBuild interactive analytics dashboards and charts in React with Recharts.
