// Generate interactive, inline HTML/SVG widgets (charts, diagrams, forms, dashboards, illustrations) that render in sandboxed iframes inside Kocoro Desktop chat. Use when the user asks to "visualize", "chart", "diagram", "explain visually", "show me", or when data is denser than a paragraph of prose.
Inspect AND manage Kocoro platform state — agents, skills, MCP servers, schedules, permissions, config, rules. 中:列出/查看/查询/创建/修改/删除/配置/安装 agent/skill/MCP/计划/权限/规则。 日:一覧/表示/確認/検索/作成/更新/削除/設定/インストール エージェント/スキル/MCPサーバー/スケジュール/権限/ルール。 MUST use for ANY read: list/show/view/display/query/get/inspect/audit/check the configured agents / skills / MCP servers / schedules / permissions / rules / config. MUST use for ANY write: create/delete/update/configure/install/connect/rename/enable/disable agent / skill / MCP server / schedule / permission / rule. Covers anything under ~/.shannon/. Do NOT use bash/file_read/file_edit to probe or modify these — kocoro routes every op through the daemon HTTP API at localhost:7533 which handles validation, atomic writes and audit logging.
dir layout
Ptengine Heatmap end-to-end analysis skill. Fetches real heatmap data via ptengine-cli and runs AI-powered CRO behavior analysis using a 4-stage psychology model. Before analysis, runs a short brand & intent discovery step (optionally with lightweight website/brand research via http / browser) to ground conclusions in business context. Self-contained — includes all analysis methodology, data transformation rules, and output schemas. Use this skill when the user wants to: analyze a webpage's heatmap data, understand user behavior on a page, compare audience segments, validate A/B test results, evaluate ad channel performance, analyze audience characteristics, find conversion barriers or opportunities, or optimize a landing page. Trigger whenever: "analyze heatmap", "heatmap analysis", "page behavior", "analyze this URL/page", "how are users behaving", "compare segments", "A/B test results", "ad performance", "audience analysis", "ptengine", "block-level analysis", "conversion optimization", "exit rate", "dwell
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Analyze PDF files attached by the user. Activates automatically when user uploads a PDF. Handles both text-based and scanned/image-based PDFs using file_read's built-in PDF rendering.
| name | kocoro-generative-ui |
| description | Generate interactive, inline HTML/SVG widgets (charts, diagrams, forms, dashboards, illustrations) that render in sandboxed iframes inside Kocoro Desktop chat. Use when the user asks to "visualize", "chart", "diagram", "explain visually", "show me", or when data is denser than a paragraph of prose. |
| allowed-tools | file_read file_write publish_to_web think |
| hidden | true |
| metadata | {"version":"1.0.3","user-invocable":"true"} |
You produce rich visual content — SVG diagrams and HTML interactive widgets — that renders inline in the Kocoro Desktop conversation, token-by-token, in a WKWebView sandbox.
Channel availability: This skill is only exposed to the LLM on Desktop / TUI / direct API paths. The Kocoro daemon suppresses it on cloud-distributed channels (Feishu, Lark, WeCom, Slack, LINE, Telegram, webhook) because their clients render markdown but not html-artifact fences — see
internal/daemon/skill_filter.go(desktopOnlySkills).
Wrap every widget in a markdown fenced code block with info string
html-artifact:
```html-artifact title="Q1 revenue" id=art_a1 mime=text/html
<style>.bar{background:var(--color-background-info)}</style>
<h2 class="sr-only">Bar chart of Q1 revenue across three regions</h2>
<div style="position:relative;height:240px"><canvas id="c1"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
new Chart(document.getElementById('c1'), { /* ... */ });
</script>
```
title — required; shown to the user and used as export filename stemid — optional; if absent, host generates a UUIDmime — text/html (default) or image/svg+xmltheme — auto (default), light, or dark<!DOCTYPE>, <html>, <head>,
<body> — the host wraps them.```html-artifact. This prevents
your example from being captured as a real artifact.Output streams token-by-token. Structure code so useful content appears early and the script tag last:
<style> (short) → content HTML → <script> last. Scripts execute
after the fence closes, not during streaming.<defs> (markers) → visual elements.<!-- HTML comments --> or /* CSS comments */. They waste tokens and
may land mid-stream in ways that confuse rendering.External scripts, styles, fonts, images, and fetch / XMLHttpRequest / d3.json calls may reach ONLY these four hosts:
cdnjs.cloudflare.comesm.shcdn.jsdelivr.netunpkg.comAny other origin is blocked by CSP and the request silently fails. You cannot
call arbitrary external APIs, your own backend, raw.githubusercontent.com,
or anything else — only static assets from these four CDNs. This applies to
both <script src>/<link href> loads and runtime fetch() calls (e.g. D3
topology JSON from jsdelivr is fine; fetching a weather API is not).
color: #333.Use these, not hardcoded hex:
--color-background-primary (white/near-black),
--color-background-secondary (surfaces), --color-background-tertiary
(page bg), --color-background-info, --color-background-danger,
--color-background-success, --color-background-warning--color-text-primary, --color-text-secondary,
--color-text-tertiary, --color-text-info, --color-text-danger,
--color-text-success, --color-text-warning--color-border-tertiary (0.08α, default),
--color-border-secondary (0.16α, hover), --color-border-primary (0.24α),
semantic -info/-danger/-success/-warning--font-sans (SF Pro), --font-serif (New York, rare editorial
use), --font-mono (SF Mono)--border-radius-md (8px), --border-radius-lg (12px, preferred),
--border-radius-xl (16px)var(--font-sans). Headings: h1 22px, h2 18px, h3 16px —
all font-weight: 500. Body: 16px, weight 400, line-height 1.7.code style, not bold.0.5px solid var(--color-border-tertiary) (upgrade to -secondary
on hover).var(--border-radius-md) for most elements, -lg for cards.input, select, textarea, button, range input) are
pre-styled — write bare tags, override only when necessary.display: block; width: 100%. Start with your content
directly; no wrapper div needed. If you want vertical breathing room, add
padding: 1rem 0 on your first element.position: fixed — the host sizes the iframe to content height,
so fixed positioning collapses it. For modal mockups, wrap everything in a
normal-flow faux-viewport: <div style="min-height: 400px; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center;"> and put the modal inside.Classes: c-blue, c-teal, c-coral, c-pink, c-purple, c-green,
c-amber, c-red, c-gray. Each provides a light-mode and dark-mode
background + foreground + SVG fill/stroke. Apply to a <g> wrapping
shape+text, or to <rect>/<circle>/<ellipse> directly — never to <path>.
Assignment rules:
purple, teal, coral, pink for general diagram categories.
Reserve blue, green, amber, red for where the node genuinely
represents informational, success, warning, or error meaning.gray for neutral/structural nodes.Text on colored backgrounds: use the 800 or 900 stop from the same ramp for text — never plain black or generic gray. When both title and subtitle sit on a colored fill, title must be darker (800 in light mode, 100 in dark) and subtitle lighter (600 light, 200 dark).
When the user asks for specific output types, read the relevant reference
file via the file_read tool:
references/charts.md —
Chart.js patterns, legends, number formattingreferences/diagrams.md +
references/svg-setup.mdreferences/diagrams.mdreferences/ui-components.mdreferences/maps.mdThis skill is visualization-only. It does not search the web, call external APIs, or retrieve live data. If the user's request requires fetching data from the internet or an external source, complete that step first (using a search or retrieval tool), then invoke this skill to visualize the results.
position: fixed<!-- HTML comments --> / /* CSS comments */code style for identifiers)display: none sections during streaming (hidden content streams
invisibly; show all stacked)<h2 class="sr-only">…</h2>.<svg role="img"> with <title> and <desc> as the
first two children.The inline html-artifact block is the primary output — it renders in
Kocoro Desktop with no public URL and no upload. Use it whenever the user's
goal is just "show me".
If the user also wants a sharable link (to send via Slack/Feishu/email, embed in a doc, etc.), you may additionally:
file_write to save the same HTML body to a temp path
(e.g. /tmp/<short-id>.html).publish_to_web with a specific purpose describing the recipient and
channel (e.g. "send revenue chart link to user via Slack").Skip this entire block if the user did not ask for a shareable link — never publish a copy "just in case." Public URLs cannot be deleted.