Agent Skills › stablyai/orca › orca-chat-visuals

orca-chat-visuals

GitHub

在聊天中以内联 HTML 形式展示图表、图表、表格或原型，通过生成符合规范的 HTML 文件并利用特定指令嵌入，以增强回答的可读性和直观性。

resources/native-chat-visuals/skills/orca-chat-visuals/SKILL.md stablyai/orca

Trigger Scenarios

用户需要查看数据可视化结果复杂概念适合用图表解释需要展示 UI 原型或报告

Install

npx skills add stablyai/orca --skill orca-chat-visuals -g -y

More Options

Non-standard path

npx skills add https://github.com/stablyai/orca/tree/main/resources/native-chat-visuals/skills/orca-chat-visuals -g -y

Use without installing

npx skills use stablyai/orca@orca-chat-visuals

指定 Agent (Claude Code)

npx skills add stablyai/orca --skill orca-chat-visuals -a claude-code -g -y

安装 repo 全部 skill

npx skills add stablyai/orca --all -g -y

预览 repo 内 skill

npx skills add stablyai/orca --list

SKILL.md

Frontmatter

{
    "name": "orca-chat-visuals",
    "description": "Show a chart, diagram, table, report or mockup inline in this Orca chat as an HTML page. Use when a visual would help the user understand your answer. Only available when the ORCA_CHAT_SCRATCH_DIR environment variable is set.",
    "user-invocable": false
}

Inline visuals in an Orca chat

Orca can show an HTML page inside your reply. Use one whenever a visual would make the answer clearer.

Writing the page

Save it in the folder named by ORCA_CHAT_SCRATCH_DIR (printenv ORCA_CHAT_SCRATCH_DIR; in PowerShell $env:ORCA_CHAT_SCRATCH_DIR). If it's unset or you can't write there, skip the visual. This folder is temporary: Orca may remove it after 30 days without chat activity or changes. Save files meant to last in the workspace.
One complete HTML file per visual, directly in that folder, under 512 KB, with a new file name each time (e.g. latency-by-region-7c1e.html): letters, digits, ., _, -, ending in .html.
Inline your styles, scripts and data. Libraries and fonts may load only from cdn.jsdelivr.net, unpkg.com, cdnjs.cloudflare.com, esm.sh, fonts.googleapis.com and fonts.gstatic.com. The page can't make network requests; use inline SVG or data: URLs for images.
Don't size anything to the viewport height (100vh); Orca fits the frame to your content.
Optional: Orca's theme colors are available as CSS variables (--background, --foreground, --muted-foreground, --border, --primary, --chart-1 to --chart-5).