canvas
A Cursor Canvas is a live React app that the user can open beside the chat.
Skill by petralabx
Install
Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.
npx agentmarket install skill/petralabx-canvas
Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.
Get the weekly diff
The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.
About
Use cases: documents, design, frontend, data
Reviews
Write a reviewNo reviews yet. Installed it? Reviews come from verified installers only. How reviews work
Permissions: not checked yet.
What's inside
- Skill name
canvas- Description
- A Cursor Canvas is a live React app that the user can open beside the chat. You MUST use a canvas when the agent produces a standalone analytical artifact — quantitative analyses, billing investigations, security audits, architecture reviews, data-heavy content, timelines, charts, tables, interactive explorations, repeatable tools, or any response that benefits from visual layout. Especially prefer a canvas when presenting results from MCP tools (Datadog, Databricks, Linear, Sentry, Slack, etc.) where the data is the deliverable — render it in a rich canvas rather than dumping it into a markdown table or code block. If you catch yourself about to write a markdown table, stop and use a canvas instead. You MUST also read this skill whenever you create, edit, or debug any .canvas.tsx file.
- License
- unknown
- Instructions
- 91 lines in SKILL.md · view on GitHub
Before installing
- Ships executable scripts
- Instructions call the network
Files (31)
- SKILL.md
- callout-tone-icons.d.ts · sdk/
- callout-tone-icons.d.ts.map · sdk/
- canvas-tokens.d.ts · sdk/
- canvas-tokens.d.ts.map · sdk/
- chart-primitives.d.ts · sdk/
- chart-primitives.d.ts.map · sdk/
- collapsible-section.d.ts · sdk/
- collapsible-section.d.ts.map · sdk/
- dag-layout.d.ts · sdk/
- dag-layout.d.ts.map · sdk/
- diff-view.d.ts · sdk/
- diff-view.d.ts.map · sdk/
- form-primitives.d.ts · sdk/
- form-primitives.d.ts.map · sdk/
- hooks.d.ts · sdk/
- hooks.d.ts.map · sdk/
- index.d.ts · sdk/
- index.d.ts.map · sdk/
- swatch.d.ts · sdk/
- swatch.d.ts.map · sdk/
- theme.d.ts · sdk/
- theme.d.ts.map · sdk/
- todo-list.d.ts · sdk/
- todo-list.d.ts.map · sdk/
- ui-primitives.d.ts · sdk/
- ui-primitives.d.ts.map · sdk/
- ui-primitives.test.d.ts · sdk/
- ui-primitives.test.d.ts.map · sdk/
- usage-bar.d.ts · sdk/
- usage-bar.d.ts.map · sdk/
The license isn't open source, so the instructions aren't shown here. Read SKILL.md on GitHub
More from petralabx/skills
- 0.524score
deployed-pr-e2e
petralabx
Run a fail-closed authenticated E2E evidence matrix against the live staging.plxcustomer.io deploy for a named pack.
SkillBFreshness: BClaude Code +9 - 0.474score
brief-to-quote
petralabx
Turn a customer or product brief into a costed price quote plus a shareable report and presentation for PLX contract manufacturing.
SkillCFreshness: CClaude Code +9 - 0.474score
autonomous-verifier
petralabx
Enforces a verification-first workflow for bug fixes and complex functionality using contract tests, eval suites, SLA and pillar checks, browser snapshot…
SkillCFreshness: CClaude Code +9 - 0.469score
automate
petralabx
Create Cursor Automations.
SkillCFreshness: CClaude Code +9 - 0.469score
claude-code-context-hygiene
petralabx
Masterful orchestrator of Claude Code context-management commands.
SkillCFreshness: CClaude Code +9 - 0.469score
codebase-investigation
petralabx
Investigate code by tracing data flow end-to-end, narrowing hypotheses with evidence, and reporting root cause with file:line proof.
SkillCFreshness: CClaude Code +9 - 0.469score
adversarial-review-loop
petralabx
Bounded build-then-independent-review loop for a meaningful code change.
SkillCFreshness: CClaude Code +9 - 0.469score
apexforge-karpathy
petralabx
Karpathy-inspired AI developer and systems architect persona for first-principles engineering, clean code, reliable evaluation loops, system design…
SkillCFreshness: CClaude Code +9 - 0.469score
autobrowse
petralabx
Route web browsing tasks through the most reliable available path.
SkillCFreshness: CClaude Code +9 - 0.469score
champion-challenger-loop
petralabx
Bounded self-improving optimization loop for any testable artifact (prompt, policy, config, ranking heuristic, scoring rule).
SkillCFreshness: CClaude Code +9 - 0.466score
capabilities-deck
petralabx
Build a confidential, multi-concept "capabilities deck" / product-innovation pitch microsite for a brand (the PAUME pattern) using the typed microsite engine.
SkillCFreshness: CClaude Code +9 - 0.466score
dead-code-triage
petralabx
Classify suspected-unused code before deleting it, ruling out dynamic imports, framework entry points, barrel re-exports, and config/string references.
SkillCFreshness: CClaude Code +9
Signals
- Stars
- 0
- Forks
- 0
- Open issues
- 0
- Last commit (this folder)
- Jul 6, 2026 (3 months ago)
From GitHub (fetched Oct 24, 2026).
Details
- License
- License unknown
- Repository
- github.com/petralabx/skills
- First seen
- Oct 24, 2026
- Last checked
- Oct 24, 2026
- Source
- GitHubgithub-graphql
Same skill elsewhere
Copies of this SKILL.md published by others; search shows only one of them.
- 0.582score
canvas
JameMy0001
A Cursor Canvas is a live React app that the user can open beside the chat.
SkillAFreshness: A★ 1Claude Code +9 - 0.336score
canvas
StarksJohn
A Cursor Canvas is a live React app that the user can open beside the chat.
SkillAFreshness: AClaude Code +9 - 0.312score
canvas
EngrPrenz
A Cursor Canvas is a live React app that the user can open beside the chat.
SkillBFreshness: BClaude Code +9
More from petralabx
- 0.524score
deployed-pr-e2e
petralabx
Run a fail-closed authenticated E2E evidence matrix against the live staging.plxcustomer.io deploy for a named pack.
SkillBFreshness: BClaude Code +9 - 0.474score
brief-to-quote
petralabx
Turn a customer or product brief into a costed price quote plus a shareable report and presentation for PLX contract manufacturing.
SkillCFreshness: CClaude Code +9 - 0.474score
autonomous-verifier
petralabx
Enforces a verification-first workflow for bug fixes and complex functionality using contract tests, eval suites, SLA and pillar checks, browser snapshot…
SkillCFreshness: CClaude Code +9 - 0.469score
adversarial-review-loop
petralabx
Bounded build-then-independent-review loop for a meaningful code change.
SkillCFreshness: CClaude Code +9 - 0.469score
autobrowse
petralabx
Route web browsing tasks through the most reliable available path.
SkillCFreshness: CClaude Code +9 - 0.469score
automate
petralabx
Create Cursor Automations.
SkillCFreshness: CClaude Code +9
Cite this page
canvas skill. Agent Mart. https://agentmart.dev/skills/petralabx-canvas (last updated 2026-10-24)