跳到正文
cccskills
免费在 GitHub 公开

plugin-visual

Create the compact purpose SVG for a Canvas plugin during authoring, including passive markup, package-local references and accessible presentation.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(3)

  • SKILL.md3.7 KB
  • agents/canvas.yaml200 B
  • assets/logo.svg934 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Plugin purpose graphic

Create a small editable illustration that communicates the plugin's actual job. Load this member at the graphic stage of Plugin Creator. Use the current exact plugin draftRef, its latest revision and common package file tools. No extra illustration installation or external asset service is needed.

Choose a useful motif

Express the plugin's input, operation or useful result with two or three recognizable forms. For an account brief, CRM rows and a research document can flow into a short brief. For document conversion, show the actual source and result types. Avoid a generic cube, app logo collage, tiny prose or reusing the Creator's own icon for every plugin.

Default to a square viewBox="0 0 256 256" with enough inner margin for small cards. Use a restrained palette, consistent strokes and simple solid shapes. The 256-square size is an authoring convention, not a rule for historical packages. Check that the purpose remains readable at roughly 24–32 pixels as well as in a detail view and against light/dark surrounding UI.

Write portable passive SVG

  • Root svg uses xmlns="http://www.w3.org/2000/svg" and a finite positive viewBox that encloses the content.
  • Include a meaningful <title> and <desc>. Use role="img" and aria-labelledby pointing to their IDs when appropriate.
  • Use paths, basic shapes and groups. Keep geometry and text within the viewBox. If text is useful, set explicit size/fill and a portable font fallback; escape XML characters. Prefer little or no text and no emoji.
  • Keep the file self-contained and passive: no scripts, event handlers, foreignObject, external resources/fonts, remote URLs, data-URL images, embedded HTML or active animation. Use only the SVG elements/attributes accepted by the server's passive-image validator. Stay below 2 MiB; a compact purpose graphic should be much smaller.

Write actual image bytes at assets/logo.svg with the draft file tool; set interface.logo: "./assets/logo.svg" in the existing manifest. interface.icon can point to a separately authored compact variant when useful. Do not add a new image field, store an absolute path or place a remote provider logo in this purpose slot.

Verify and repair

Validate the complete current draft through validate_canvas_package_draft. Check the returned SVG/path/schema errors and repair the actual file. Validation belongs to that exact draft revision; deleting or changing the image afterward needs fresh validation and final publish rechecks it.

Inspect the graphic in the actual package preview, card and inline presentation when the available runtime supports visual inspection. Check clipping, scaling, contrast and legibility; source validation alone cannot prove good design. Preserve the draft and report an outstanding visual check when you cannot inspect it.

Internal SVG metadata does not replace a host-level alternative. A meaningful preview needs descriptive alt text or an adjacent semantic equivalent. In a small inline reference next to the already visible plugin name, a decorative image should avoid a redundant screen-reader announcement. Use the existing package presentation service so access and exact version remain enforced.

Return the written package-relative path, concise explanation of the motif, validation result and honest visual-inspection state to Plugin Creator. The graphic is one part of a valid package; it does not prove connection setup or workflow success.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.

中文简介正在准备中。当前显示原文说明。

canvascoding/canvas-notebook112026年10月19日 更新

Applies Canvas brand colors, typography, and visual polish to artifacts that benefit from a consistent product look-and-feel. Use it when brand colors, style guidelines, visual formatting, or company design standards apply.

中文简介正在准备中。当前显示原文说明。

canvascoding/canvas-notebook112026年10月19日 更新

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

中文简介正在准备中。当前显示原文说明。

canvascoding/canvas-notebook112026年10月19日 更新

Create or improve an organization-managed Canvas plugin that combines complete new or existing skills with optional custom MCP and Composio integrations. Use for reusable multi-skill workflows, plugin composition, plugin editing, and plugin graphics.

中文简介正在准备中。当前显示原文说明。

canvascoding/canvas-notebook112026年10月19日 更新

Use this Canvas-owned clean-room skill to guide collaborative writing for documentation, proposals, technical specs, decision records, PRDs, RFCs, operating guides, and structured memos. Trigger when the user wants help drafting, organizing, refining, reviewing, or testing a document before sharing it.

中文简介正在准备中。当前显示原文说明。

canvascoding/canvas-notebook112026年10月19日 更新

docx

免费

Use this Canvas-owned clean-room skill for creating, reading, editing, reviewing, redlining, commenting, or repairing Word `.docx` documents. Trigger for Word documents, DOCX files, memos, reports, letters, templates, tracked changes, comments, table of contents, headers, footers, page numbers, and Google Docs-targeted documents that should be authored as DOCX first.

中文简介正在准备中。当前显示原文说明。

canvascoding/canvas-notebook112026年10月19日 更新

查看 canvascoding 的全部技能

报告此技能的问题