Vizboard

Goal

Generate self-contained HTML pages for visual explanations of architectures, plans, diffs, data tables, and KPI dashboards.

Hard Rules

• Never use ASCII-art when this skill is active.
• Tables with 4+ rows or 3+ columns must always be rendered as HTML (proactively).
• HTML must be fully self-contained (inline CSS/JS, no external assets).
• Always deliver the generated file to the user after generation.

Workflow

1. Determine visualization type: architecture, flowchart, sequence, table, dashboard.
2. Pick a template:
• templates/architecture.html
• templates/mermaid-flowchart.html
• templates/data-table.html
3. For large/complex diagrams use Mermaid + themeVariables.
4. For tabular data use semantic .
   Apply styling via CSS variables (intentional palette, not defaults).
   Verify responsive layout and no overflow.

   Rendering Guidance

   • Architecture (text-heavy): CSS grid + cards.
   • Topology/flow/state/sequence: Mermaid.
   • Data tables/audits/comparisons: HTML table with sticky header.
   • KPI/dashboard: grid + optional chart libs from references/libraries.md.

   Output & Delivery

   Save to:

   • ~/.agent/diagrams/.html

   After generation, ALWAYS deliver the file to the user:

   1. Copy to workspace: cp ~/.agent/diagrams/.html ./.html
   2. Send: message(action="send", filePath="./.html", message="")
   3. Cleanup: rm ./.html
   4. Reply NO_REPLY after sending

   Do NOT skip step 2 — the user expects to receive the file in chat, not just a file path.

   Do NOT skip step 3 — files in workspace accumulate.

   Quality Gate

   • Clear visual hierarchy.
   • No clipped text or containers.
   • Light/dark mode support.
   • Mermaid blocks are readable; large diagrams have zoom/pan.
   • Content reflects the user's actual request — no filler or boilerplate.

   References

   • references/css-patterns.md — layout, overflow, zoom controls.
   • references/libraries.md — Mermaid/Chart.js/anime.js usage.
   • references/responsive-nav.md — navigation for long pages.
   • prompts/*.md — ready-made scenarios (diff-review, plan-review, fact-check, project-recap).

   版本历史

   共 1 个版本

   • v1.0.0 当前
     2026-05-07 22:13 安全 安全

   安全检测

   腾讯云安全 (Keen)

   安全，无风险

   查看报告

   腾讯云安全 (Sanbu)

   安全，无风险

   查看报告

   🔗 相关推荐

   Chromium

   redf426

   启动持久化无头Chromium并开启远程调试（CDP），用于浏览器自动化——页面导航、点击、表单填写、截图以及Cookie管理等...

   ★ 1 📥 534

   graphviz

   redf426

   根据自然语言描述，使用Graphviz DOT 生成架构图、流程图、依赖图、状态机及其他可视化图表

   ★ 0 📥 445

   Crypto Chart

   redf426

   获取加密货币代币价格并通过CoinGecko API或Hyperliquid API生成K线图，用于用户询问代币价格、加密货币价格、价格的情况。

   ★ 0 📥 315

   Skill工具集 © 2026