Docs & Knowledge · nexu-io/html-anything
dashboard
Fixed sidebar + topbar + KPI grid + 1-2 charts
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
The template itself contains no executable code: the loader reads the frontmatter and body from src/lib/templates/skills/<id>/SKILL.md, returning the body along with example content as LoadedSkill.
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
What is happening here: SKILL.md is the sole source of behavior—frontmatter is used for selector rendering (zh_name/emoji/aspect_hint/tags/example_*, etc.), and the full body acts as the prompt; the loader performs no semantic validation and simply passes down whatever the template specifies.
The host statically constructs the prompt before dispatch: the template body is sandwiched between SHARED_DESIGN_DIRECTIVES and [Input Format]/[User Content].
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
What is happening here: The template only defines "what this specific deliverable looks like" (layout/rhythm/components), while shared directives enforce cross-template hard constraints—single-file HTML, prohibition of file tools, loading Tailwind and Google Fonts via CDN, content authenticity, and Chinese Pangu spacing.
Shared directives express hard constraints as explicit prohibitions on the agent and mandate content-driven quantity (numbers in the template serve only as reference minimums).
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
Later in the same file, another rule states: the quantity of output slides / frames / cards / sections is determined entirely by the actual length and information structure of [User Content]—explaining why this template type does not break as content grows: at least one card/section per piece of content, with the template merely providing layout options.
Execution is actually performed by the coding agent CLI already installed and logged in on the user's local machine: the host spawns a child process, feeds it the prompt, and streams HTML capture from stdout.
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
What is happening here: The template skill provides only prompts; capabilities (including code generation and tool execution) come from the host CLI's existing permissions; the skill directory contains no script entry points of its own, so classification is based strictly on in-directory assets (host actions are excluded).
/api/convert is the execution path for templates: it assembles skill.body and user content into a prompt, then passes it to invokeAgent.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
Edit mode follows buildEditPrompt separately (minimal diff edits, file tools disabled, requiring direct streaming output of complete HTML), ensuring a stable deliverable form: single-file HTML, inline CSS/SVG, and external links limited strictly to fonts and chart libraries explicitly requested by specific templates.
The template divides the single-page admin dashboard into five sections: fixed left sidebar + topbar + KPI grid + 1-2 primary charts + recent activity, declaring it as a standard admin/analytics single page.
next/src/lib/templates/skills/dashboard/SKILL.md
【意图】标准 admin/analytics 仪表板单页。
What is happening here: The deliverable is first qualified in the intent section (single page, standard admin), followed by five layout items that fix the structure so the model does not need to determine the information architecture on its own.
The components of the sidebar and topbar are explicitly specified: sidebar = logo + navigation + user footer; topbar = search + notifications + avatar.
next/src/lib/templates/skills/dashboard/SKILL.md
- Fixed left sidebar (logo + 导航 + 用户 footer)
This element-checklist approach offers high implementation fidelity: the example sidebar provides brand + nav (Overview/Funnels/Cohorts/… + Workspace grouping) and a user section, while the topbar provides search, notifications, and avatar.
The main area is quantified as a KPI card grid (3-5 items) + 1-2 primary charts (line/bar/area) + a bottom recent activity list.
next/src/lib/templates/skills/dashboard/SKILL.md
- Main: KPI cards 网格 (3-5 个)
The example uses the upper limit: 4 KPIs (MRR / Active accounts / Churn / P95 latency), each with up/down delta markers, adhering to the standard 3-5 item layout and KPI card structure.
The example is implemented entirely with inline CSS + system fonts + inline SVG (no Tailwind, no font CDN, zero URLs, zero <script>), with charts hand-drawn via SVG polyline rather than a chart library.
next/src/lib/templates/skills/dashboard/example.html
<svg viewBox="0 0 600 240" preserveAspectRatio="none">
What is happening here: Downscaling the 1-2 primary charts to inline SVG polylines enables offline usability, zero scripts, and zero dependencies; the trade-off is the absence of interactive tooltips, making it a static report rather than an interactive dashboard.
The example uses a single-screen application shell layout: fixed-width aside.sidebar + main content area, with KPIs in grid repeat(4,1fr), falling back to two columns at the 900px breakpoint.
next/src/lib/templates/skills/dashboard/example.html
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
The same CSS includes @media (max-width: 900px) falling back to 2 columns, showing that while targeted at desktop 1440, the example retains narrow-screen usability.
The example annotates section anchors using data-od-id (sidebar/topbar/kpis/…/recent-events), serving as a directly usable structural tagging convention.
next/src/lib/templates/skills/dashboard/example.html
<div class="topbar" data-od-id="topbar">
What is happening here: Adding stable IDs to each section facilitates subsequent editing (the host's minimal diff edit mode targets DOM anchors) and manual navigation; the same convention appears in templates like dating-web.
2Core Capabilities
01Fixed left sidebar (logo + grouped navigation + user footer)
02Topbar (search + notifications + avatar)
03KPI card grid (3-5 items; 4 in example with delta indicators)
041-2 primary charts (line/bar/area; example implements line charts via inline SVG polyline)
05Bottom recent activity list (example includes Recent events and New accounts tables)
06Script-free / link-free offline implementation path (inline CSS + system fonts + inline SVG)
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 directives and rule text, without script execution or external side effects
Audit Notes: Classification is based strictly on the skill's own directory (only SKILL.md + example.html, no scripts/, no bundled CLI, no credential reads, no disk writes): no script entry points, no bundled CLI, no credential reading, and no disk write instructions; the SKILL.md body does not request importing any external endpoints at runtime (specifying only layout and element checklists). No outbound requests occur during execution. The endpoints physically present in the directory are limited to example.html with zero URLs and zero <script> (inline CSS + system fonts + inline SVG)—no network endpoints exist within the directory. Under Batch 4 final criteria, external references are treated as **artifact-time references** (the generated HTML fetches CDN/fonts when opened in a browser; the skill does not scrape, report, or transmit assets during execution), and thus are not scored, only listed here. Host-wrapper mechanisms (loader→assemblePrompt→local agent CLI spawn, preview iframe sandbox) are host behaviors and recorded under verdict.risks.
5Second-Pass Verification
- [ok] 「零外链」判定 — dashboard/ 目录内 http(s) 命中数为 0，<script> 命中数为 0；字体为 -apple-system/system-ui/mono，执行期与产物期均无外发（对比 data-report 的 jsdelivr 图表库为产物期引用）。
- [ok] 布局条目覆盖度 — 侧栏/顶栏/KPI 网格/主图表/活动列表五条全部实现：KPI 取 4 个（区间 3-5 内），图表 1 张（区间 1-2 内），底部另有 New accounts 与 Recent events 两张表。
- [ok] 图表实现方式 — SKILL.md 只要求 1-2 张主图表（折线/柱/区域），示例以 <svg viewBox="0 0 600 240" preserveAspectRatio="none"> + polyline 折线实现，属合规实现且无需脚本。
- [ok] license / stars / commit 元数据 — GitHub API（api.github.com/repos/nexu-io/html-anything）：spdx_id=Apache-2.0、stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z；工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 553ed98c283f 同源）。
- [ok] skill.path 与目录资产面 — pin 目录内该路径存在且含 SKILL.md；目录内文件清单已用 glob 全量核对（含隐藏文件），无 scripts/、无 references/、无二进制资产（competitive-teardown 的 assets/ 为纯 HTML，另行记录）。
6Verdict & Scenarios
Best for: Suitable for quickly generating static single-page internal admin or operations dashboards: KPI overviews, growth trends, recent activity feeds; especially ideal for scenarios requiring offline access and zero-dependency deliverables (as demonstrated in the example).
Not for: Not suitable for BI dashboards requiring interactive filtering or drill-downs (no scripts, no data binding); not suitable for data report deliverables (opt for data-report, which features chart libraries and strict adherence to real data); not suitable for mobile-first scenarios (aspect_hint is set to desktop 1440).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload dashboard.tar.gz
sha256:
Option B · Copy Guide for Agent41d2f22d7bf54bf4…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.