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

orca-chat-visuals

GitHub

指导 Agent 在聊天中生成内联 HTML 可视化内容（图表、表格等），需将文件保存至指定临时目录并调用特定语法展示。

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

触发场景

用户需要查看数据图表或趋势图用可视化方式辅助解释复杂答案生成系统架构图或流程图展示数据对比表格

安装

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

更多选项

非标准路径

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

不安装直接使用

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 belongs to this chat and is kept as long as the chat. Save files meant for the project 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.
Use Orca's theme variables for surfaces, text, and controls; pair hover --accent with --accent-foreground. Scope fixed-palette CSS to its mockup. Orca updates tokens and color-scheme live. Charts use --chart-1 to --chart-5.
Make the saved HTML readable in an ordinary browser too: use paired fallback values such as background:var(--background,#fff);color:var(--foreground,#171717) for every theme-token use. Scripts reading chart colors need a fallback too: getComputedStyle(document.documentElement) .getPropertyValue('--chart-1').trim() || '#2563eb'. Never redefine Orca's tokens on :root: those declarations would override the viewer's live theme. Use separate names for local colors.
Exposed tokens: --background, --foreground, --card, --card-foreground, --popover, --popover-foreground, --primary, --primary-foreground, --secondary, --secondary-foreground, --muted, --muted-foreground, --accent, --accent-foreground, --destructive, --destructive-foreground, --border, --input, --ring, --radius, --font-sans, --font-mono, and --chart-1 through --chart-5.

Showing it

After the file exists, put this on its own line in your reply, outside any code block:

::orca-visual{file="latency-by-region-7c1e.html" title="Latency by region"}

file is the bare file name, never a path; title is optional. At most 8 per reply.

版本历史

f29226e 当前 2026-11-07 15:23
6c6e3d9 2026-11-02 19:10
修复主题色悬停样式以支持实时主题切换；优化视觉资源存储策略，使聊天记录内的可视化文件和图片随聊天生命周期持久化，不再因30天无活动而删除。
b6325ef 2026-10-19 02:31