Agent Skills › DotHarness/dotcraft › visualize

visualize

GitHub

用于在对话中创建可视化图表、交互式工具及模拟器。支持HTML内联渲染、Mermaid静态图及降级方案，旨在通过视觉化手段增强解释效果或响应用户对数据展示与演示的明确需求。

src/DotCraft.Core/Skills/BuiltIn/visualize/SKILL.md DotHarness/dotcraft

触发场景

用户要求展示可视化选项需要创建图表、地图或模拟器

安装

npx skills add DotHarness/dotcraft --skill visualize -g -y

更多选项

非标准路径

npx skills add https://github.com/DotHarness/dotcraft/tree/main/src/DotCraft.Core/Skills/BuiltIn/visualize -g -y

不安装直接使用

npx skills use DotHarness/dotcraft@visualize

指定 Agent (Claude Code)

npx skills add DotHarness/dotcraft --skill visualize -a claude-code -g -y

安装 repo 全部 skill

npx skills add DotHarness/dotcraft --all -g -y

预览 repo 内 skill

npx skills add DotHarness/dotcraft --list

SKILL.md

Frontmatter

{
    "name": "visualize",
    "description": "Create visualizations and interactive tools in conversation. Use when asked to show or demonstrate visualization options, show how something works, or create simulators or labs, maps, plots, charts or graphs, comparisons, scenarios, adjustable inputs, and exploration."
}

Visualize

Create a visual when it materially improves the explanation or when the user explicitly asks for a visual or demonstration.
When the user asks to demonstrate visualization capabilities and inline support is available, create an actual inline HTML visualization. Do not answer only with a list of Markdown, Mermaid, or ASCII formats, and do not describe DotCraft Desktop as a terminal.
Use Mermaid for static structures fully explained by labeled nodes and edges.
Use an inline HTML visualization for dynamics, adjustable inputs, spatial motion, plots, maps, and interactive exploration only when the system context provides a DotCraft visualization directory.
If inline visualization support is unavailable, fall back to Mermaid, a Markdown table, an ASCII diagram, or concise prose. Never emit an unusable directive.

Inline output

Choose a new lowercase ASCII hyphenated name ending in .html. Never overwrite or edit an earlier visualization.
Build a literal HTML fragment only: no doctype, html, head, or body tags; no fetch, XHR, WebSocket, local files, or other API calls; keep it below 2 MiB.
Give the fragment a unique root id and the viz-root class. The root is an unframed conversation surface: do not wrap the whole visualization in .card. Scope scripts and content-specific styles to the root, but use the host button and form utilities instead of redefining ordinary product controls. Use semantic controls, visible focus, accessible chart descriptions, and layouts that reflow from 736px to 320px.
Use the ordinary WriteFile tool with an absolute path inside the visualization directory from system context.
Read the file back with ReadFile. Inspect the returned source and rewrite any literal escaped quotes or newlines before continuing.
After a successful write and read-back, put this exact directive on its own line where the visual belongs:

::dotcraft-inline-vis{file="<title>.html"}

Keep necessary explanation outside the fragment. Do not link to or announce the stored file.

Host contract

Theme variables: --background, --foreground, --card, --card-foreground, --primary, --primary-foreground, --secondary, --secondary-foreground, --muted, --muted-foreground, --accent, --accent-foreground, --destructive, --border, --input, --ring, and --viz-series-1 through --viz-series-6.
Utilities: .viz-root, .card, .viz-grid, .viz-row, .viz-controls, .viz-stat, .viz-stat-value, .viz-badge, .btn, .btn-primary, .btn-ghost, .form-label, .form-control, .form-select, .form-range, .form-check, .form-switch, .table, .table-responsive, .text-small, .text-muted, .text-center, .text-end, .sr-only, and [data-tooltip].
Prefer inline SVG for simple charts. Pair color with text or shape and label axes and units.
Static CDN resources may come only from cdnjs.cloudflare.com, esm.sh, cdn.jsdelivr.net, unpkg.com, fonts.googleapis.com, fonts.gstatic.com, or fonts.bunny.net.
Lucide is available as globalThis.lucide. Initial static icons are initialized by the host. Initialize dynamically added icons with lucide.createIcons({ attrs: { width: 16, height: 16 } }).
A drill-down action may call await window.openai.sendFollowUpMessage({ prompt, title }). Keep title at most 250 characters. The trusted DotCraft host asks the user to confirm before sending.