canvas

Agent Skills › phodal/routa › canvas

canvas

GitHub

用于生成 Routa Canvas 交互式可视化组件。通过读取 SDK 资源，创建符合规范的 TSX 文件，实现前端界面渲染与交互逻辑封装。

.agents/skills/canvas/SKILL.md phodal/routa

Trigger Scenarios

用户请求创建或更新 Routa Canvas 可视化内容需要生成基于 Routa 会话的交互式前端组件

Install

npx skills add phodal/routa --skill canvas -g -y

More Options

Non-standard path

npx skills add https://github.com/phodal/routa/tree/main/.agents/skills/canvas -g -y

Use without installing

npx skills use phodal/routa@canvas

指定 Agent (Claude Code)

npx skills add phodal/routa --skill canvas -a claude-code -g -y

安装 repo 全部 skill

npx skills add phodal/routa --all -g -y

预览 repo 内 skill

npx skills add phodal/routa --list

SKILL.md

Frontmatter

{
    "name": "canvas",
    "metadata": {
        "short-description": "Create a Routa Canvas artifact"
    },
    "description": "Create or update a Routa Canvas artifact for the current task. Use when the user wants a live visual or interactive canvas generated from a Routa session."
}

Use Routa Canvas for this turn.

Canvas behavior:

Create or overwrite exactly one *.canvas.tsx file during the tool run.
The file content must be the TSX source itself, not markdown.
Prefer storing the file under the selected repository when appropriate.
Use a short descriptive file name ending in .canvas.tsx.
After the file is created, mention the created path briefly.

Source contract:

Create a Routa browser canvas as TSX source code.
Return only the TSX source.
Do not include markdown code fences.
Do not include explanations, notes, or prose before or after the code.
The source must export default function Canvas() or export default Canvas.
Prefer a self-contained component with inline styles.
If you import anything, you may only import from react, routa/canvas, routa/canvas/*, @canvas-sdk, or @canvas-sdk/*.
Do not use browser globals or side effects such as window, document, fetch, or localStorage.
Do not render fake shell chrome such as browser frames, global app shells, left sidebars, or chat panes unless the prompt explicitly asks for it.
Keep the composition flat, minimal, purposeful; avoid gradients, emojis, box shadows.

Canvas SDK access:

Prefer MCP tool read_canvas_sdk_resource with uri resource://routa/canvas-sdk/manifest.
If your provider supports native MCP resource reads, you may read that same URI directly instead.
That manifest is the authoritative Canvas SDK index for this session.
Then read only the defs resources you actually need from its definitionResources list, preferably through read_canvas_sdk_resource.
Import only from routa/canvas or react.
If a symbol or prop is not present in those resources, do not invent it.
Example definition resources:
resource://routa/canvas-sdk/defs/primitives
resource://routa/canvas-sdk/defs/hooks
resource://routa/canvas-sdk/defs/data-display
resource://routa/canvas-sdk/defs/containers
resource://routa/canvas-sdk/defs/controls
resource://routa/canvas-sdk/defs/charts
resource://routa/canvas-sdk/defs/diff-view
resource://routa/canvas-sdk/defs/dag-layout
If neither direct resource reads nor the helper tool are available, stay conservative and use only the symbols named in the manifest.