CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

canvas

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 (observability, analytics, issue-tracking and messaging tools) 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.

Quality

84%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

81%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, concrete instruction skill with a clearly sequenced workflow, an explicit pre-delivery checklist, and real error-recovery guidance built around an authoritative diagnostics signal. The only notable gaps are the absence of a minimal starter .canvas.tsx example and a few sentences of general design advice that could be trimmed.

DimensionReasoningScore

Conciseness

Efficient and platform-specific throughout — exact path rules ('/Users/<user>/.cursor/projects/<workspace>/canvases/<name>.canvas.tsx'), import restrictions ('Import only from cursor/canvas'), and labeling specs — with only minor trims available ('A canvas exists to show real content', 'Not everything deserves equal treatment', the squint-test aside). Not 5 because a few sentences restate design fundamentals Claude already knows; not 3 because there is no padded section.

4 / 5

Actionability

Highly concrete guidance: exact directory and filename rules, 'Default-export the top-level component', 'No fetch(), no network calls', label examples ('API error rate by service', 'Latency (ms)'), a copy-paste markdown link format, and a pointer to the SDK .d.ts declarations for exact exports. Not 5 because there is no minimal .canvas.tsx component skeleton to start from; not 3 because every step is executable as written.

4 / 5

Workflow Clarity

Explicitly ordered ('Follow the workflow below in order') from the decide-then-write sequence through the Pre-delivery self-check, with real feedback loops: the 'Canvas TypeScript check' line is designated the authoritative diagnostics signal and Troubleshooting gives recovery steps for a blank canvas. Not 4 because both the validation checklist and the error-recovery loop are explicit rather than implicit.

5 / 5

Progressive Disclosure

Well-organized single-file structure with clear section headers and an on-demand, one-level-deep external reference ('~/.cursor/skills-cursor/canvas/sdk/index.d.ts — read them when you need exact exports'); no bundle files exist to inline or bury. Not 5 because the ~90-line body keeps all content inline with no split of design/troubleshooting guidance into separate files and the under-50-lines exception does not apply; not 3 because nothing that belongs in a separate file is buried.

4 / 5

Total

17

/

20

Passed

Description

86%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, trigger-rich description that clearly states what a canvas is and exactly when to use it, anchored by the distinct '.canvas.tsx' extension. Its main weaknesses are the second-person directive voice and the scenario-list framing, which weaken concrete-capability specificity.

Suggestions

Rewrite in third person (e.g., 'Renders standalone analytical output as a live React canvas beside the chat...') — the current 'You MUST use a canvas' / 'If you catch yourself' phrasing is second person, which the rubric penalizes on specificity.

Lead with 2-3 concrete capabilities (create a single-file .canvas.tsx React component using cursor/canvas SDK components with inline data) before the trigger list, so the 'what' is action-based rather than scenario-based.

DimensionReasoningScore

Specificity

Names the domain ('A Cursor Canvas is a live React app that the user can open beside the chat') and concrete actions like 'render it in a rich canvas rather than dumping it into a markdown table' and 'read this skill whenever you create, edit, or debug any .canvas.tsx file', but the long enumeration ('quantitative analyses, billing investigations, security audits...') lists trigger scenarios rather than capabilities, and the pervasive second-person voice ('You MUST use a canvas', 'If you catch yourself') costs a point per the rubric's voice rule — base 4, penalized to 3. Not 2 because the domain and several concrete behaviors are explicitly named.

3 / 5

Completeness

Explicitly answers both: what ('A Cursor Canvas is a live React app that the user can open beside the chat') and when ('You MUST use a canvas when the agent produces a standalone analytical artifact', 'whenever you create, edit, or debug any .canvas.tsx file') with concrete trigger phrases. Not 4 because the 'when' clause is as explicit and enumerated as the anchor-5 example.

5 / 5

Trigger Term Quality

Covers natural user phrasing broadly — 'quantitative analyses', 'billing investigations', 'security audits', 'timelines', 'charts', 'tables', 'MCP tools', 'markdown table' — and includes the file-extension trigger '.canvas.tsx' plus the synonym 'canvas'. Not 4 because coverage including synonyms and the file extension is comprehensive rather than merely good.

5 / 5

Distinctiveness Conflict Risk

Mostly distinct — the '.canvas.tsx' file type and Cursor-specific locations give it a clear niche — but 'any response that benefits from visual layout' and 'charts, tables' create minor overlap risk with general visualization or formatting skills. Not 5 because of that breadth; not 3 because the core trigger is a proprietary artifact few other skills would claim.

4 / 5

Total

17

/

20

Passed

Validation

75%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 12 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

relative_links

Relative link issues: 1 suspicious

Warning

Total

12

/

16

Passed

Repository

saski/arnesto

Path

.cursor/skills-cursor/canvas/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.