本文へ移動
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(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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月17日 更新

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月17日 更新

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月17日 更新

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月17日 更新

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月17日 更新

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月17日 更新

canvascoding のスキルをすべて見る

このスキルの問題を報告する