agentleFS
Sign inStart free
0mlkrizzz655335v0mlkrizzz655335v/claude-skills-zh/skills/dev-env/canvas/SKILL.md

canvas

Skill2 starsChanged 5 months agoMITView on GitHub

Canvas 交互视图。用 `.canvas.tsx` 工件做原生交互界面。

We split this skill into the rules it gives an agent

5 rules. 0 are common, 2 are distinctive, and 3 are very specific to this project.

  • 0

    Common

    Most of the 40 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Create or edit a standalone .canvas.tsx artifact when an interactive view helps the user's task.

    line 16
  2. Very specific:

    Import only from cursor/canvas.

    line 29
  3. Distinctive:

    Read the bundled SDK exports and the specific sibling declaration files needed for exact props and hooks.

    line 31
  4. Very specific:

    Use useHostTheme() tokens.

    line 32
  5. Distinctive:

    Use host diagnostics or the available renderer to check the file and inspect the result when available.

    line 38

“Common” is measured: kept by at least 6 in 10 of the 40 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Codex Canvas

Create or edit a standalone .canvas.tsx artifact when an interactive view helps the user's task. Use an existing requested output format or application when specified. A short table or an intermediate investigation does not by itself require a canvas.

Runtime and location

Before authoring a new native canvas, confirm that the current host supports .canvas.tsx rendering and obtain its output directory from the current environment or host documentation. Do not infer a renderer from the presence of TypeScript declaration files. Do not use a guessed /Users/.../.cursor/projects/... path on Windows or assume that a generic file write registers or compiles a canvas.

If native canvas rendering is unavailable, complete the requested analysis or artifact with an available inline visualization, ordinary HTML file, chart, or concise chat output, as appropriate. Explain the limitation only when it affects the requested result. Do not make a replacement artifact when the user explicitly requires native Canvas and the format matters; prepare the content and identify the unavailable runtime.

For an existing .canvas.tsx, preserve its supported location and imports. If the current host cannot run it, distinguish source edits from runtime verification.

Authoring contract

  • One .canvas.tsx file, default-exporting its main component.
  • Import only from cursor/canvas; no relative imports, npm packages, or Node built-ins in the artifact.
  • Embed the required data inline. No fetch() or network calls.
  • Read the bundled SDK exports and the specific sibling declaration files needed for exact props and hooks. Use the installed declarations rather than guessing exports.
  • Use useHostTheme() tokens; see hooks. Keep decorative styling restrained and preserve readable hierarchy.
  • Omit empty decorative sections and placeholders. Represent actual zeros and missing observations accurately when they are meaningful data.
  • Label plots with specific metrics, units, series, source, time range, and transformations. Distinguish missing data from zero.

Verification and delivery

Use host diagnostics or the available renderer to check the file and inspect the result when available. A successful write alone is not evidence of compilation or rendering. Report any unverified runtime behavior plainly.

Link a delivered canvas with its full absolute file path. Say it opens beside chat only when the host actually supports that behavior. Keep the explanation proportional to the task.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free