Docs & Knowledge · nexu-io/html-anything
live-dashboard
Notion-style team dashboard featuring KPIs, 7-day sparklines, an activity feed, and a task table.
L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Five-section layout: Header (team + time window) → KPI card grid → 7-day sparklines → Real-time activity feed → linked database task table (status pills).
next/src/lib/templates/skills/live-dashboard/SKILL.md
- KPI 卡片网格
This template has the highest information density in the batch: the five distinct, standalone blocks make it ideal for long-form 'team overview' pages.
Delivers a 'live' feel even without a data source: The example explicitly states there is no connector bound, the displayed metrics are seeded sample data, and sparklines plus the activity stream are rendered using inline JS.
next/src/lib/templates/skills/live-dashboard/example.html
<div class="pill-live sample" id="livePill" title="No connector bound — values below are seeded sample data">
The body text also clarifies 'fall back to seed data even without a data source'—seed fallback is a core intentional design of this template, not a bug.
Status semantics use Notion database color palettes: Done/progress/blocked/todo/review 5-level pill color values are hardcoded in CSS variables.
next/src/lib/templates/skills/live-dashboard/example.html
--pill-done-bg: #dbeddb; --pill-done-ink: #2b593f;
The five sets of bg/ink variables are the most direct source of the 'Notion feel', shaping the look-and-feel far more than the layout itself.
The template itself is a prompt: The main text of SKILL.md is read by the loader, assembled with the shared prelude and user content, and passed to the local agent CLI for execution.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
No code inside the template directory is executed at runtime: /api/convert only receives {agent, templateId, content}, uses loadSkill(templateId) to extract the SKILL.md body as the prompt core, and passes it to the logged-in local agent CLI; HTML streams back to the frontend via stdout.
The skill directory is a pure text asset: The loader reads SKILL.md from disk; no executable code from the directory is loaded.
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
Skills in the file system are purely text: The loader scans each directory for SKILL.md, extracts frontmatter as picker metadata, and returns the main text as body; no module within this template directory is imported or executed.
The shared prelude is injected before the template, establishing the highest priority rule: 'The template only defines layout, style, palette, fonts, and component libraries; item quantity is determined by user content.'
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
The shared prelude is injected before the template body, defining that 'the template only defines layout/style/palette/font/component library, while quantity is driven by user content'—thus, the layout list in this template functions as a 'reusable layout pool' rather than a hard limit on pages or frames.
The shared prelude is injected before the template, establishing the highest priority rule: 'The template only defines layout, style, palette, fonts, and component libraries; item quantity is determined by user content.'
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
The prelude strictly forbids file system tools and requires pure HTML streamed directly in the response body, leaving disk writing to the frontend—the skill itself performs no disk-writing actions.
The skill directory is a pure text asset: The loader reads SKILL.md from disk; no executable code from the directory is loaded.
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
The example.html in the directory is a golden sample distributed with the repo; the preview route reads and serves it directly from disk (no build, no compilation), serving as both a quality baseline and preview asset.
2Core Capabilities
01KPI card grid
027-day trend sparkline cards
03Real-time activity feed (avatar + action + timestamp)
04Linked database task table + 5-tier status pills
05Sample/seed mode with refresh button (offline demonstration)
06Inline JS rendering for sparklines and demo row flashing (the only script-enabled sample in this batch)
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
- SKILL.md: Pure prompt instructions and rule text; contains no script execution or external side effects
Audit Notes: 🟢 Green. Target evaluated = the skill directory itself: Contains zero URLs (example.html contains no http(s) endpoints either). The directory contains only SKILL.md and example.html, with zero scripts, zero executable code, zero network endpoints, zero credential reads, and zero disk-write instructions. Executing according to SKILL.md results in the host model generating an HTML text output without any egress or disk-write operations. Host shell and artifact usage behaviors do not affect the rating and are only logged in verdict.risks: the shared.ts prelude requires artifacts to import Tailwind CDN (https://cdn.tailwindcss.com) and Google Fonts; runtime spawns the logged-in local agent CLI (envFor passes through process.env); the preview iframe uses sandbox="allow-scripts allow-same-origin".
5Second-Pass Verification
- [discrepancy] 规范↔示例：zebra 斑马纹 — 正文写「Linked database task table (zebra + 状态 pill)」；示例没有 nth-child 斑马纹，改用 `.db-row:hover` 高亮与 `.db-row.changed` 行闪烁动画；状态 pill 五档齐备。
- [ok] 示例脚本普查 — example.html 仅 1 个内联 <script>；fetch/XMLHttpRequest/WebSocket 命中 0，脚本只做 seeded 数据渲染与演示动效，与示例自述「seeded fixtures, not a real workspace」一致。
- [ok] 7 日窗口核对 — 示例命中 `Tasks created · last 7 days`，与正文「7 天 sparkline 趋势」一致。
- [ok] seed 兜底核对 — 正文「即使没有数据源也用 seed 数据兜底」；示例 `pill-live sample` 的 title 为 `No connector bound — values below are seeded sample data`，并在刷新按钮 title 里标明 sample mode。
- [ok] commit/host 侧声明 — 示例末尾提示 `tasks and activity below are seeded fixtures, not a real workspace.`——自查诚实，不存在把演示数据冒充真实数据的误导性文案。
- [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html；无 scripts/、无 references/、无数据文件、无包管理器清单。
- [ok] 可执行代码普查 — example.html 内 <script> 计数 = 1，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
- [ok] 外链端点普查 — 目录内（含 example.html）零 http(s) 命中，产物离线自持。
6Verdict & Scenarios
Best for: Team weekly reports/operational overview long pages, 'data dashboard' visuals for product demos, Notion-style dashboard prototypes; best suited for presentations that need to look 'actively running' even without live data sources.
Not for: Production dashboards requiring live data integration and auto-refresh (template contains no connectors, only seed demos); interactive chart analytics (example only provides sparklines); distribution channels with strict 'no scripts allowed' constraints.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload live-dashboard.tar.gz
sha256:
Option B · Copy Guide for Agentd4f43f274c67de59…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.