Agent Skills › DotHarness/dotcraft › visualize

visualize

GitHub

用于在对话中创建可视化图表、交互式工具及模拟器。支持生成内联HTML可视化、Mermaid图或ASCII图表，适用于演示动态数据、地图、图表及可调输入场景，提升解释效果。

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

Trigger Scenarios

用户要求展示或演示可视化选项需要创建模拟器、实验室、地图、图表、图形或对比分析涉及可调整输入或探索性场景

Install

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

More Options

Non-standard path

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

Use without installing

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.