Docs & Knowledge · nexu-io/html-anything
data-report
Converts CSV/Excel/JSON data into a visually compelling, interactive report page
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, and returns the body along with example content as a LoadedSkill.
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
What is happening here: SKILL.md serves as the single source of truth—the frontmatter is used for selector rendering (zh_name, emoji, aspect_hint, tags, example_*, etc.), and the entire body serves as the prompt; the loader performs no semantic validation and simply passes through whatever is written in the template.
The host assembles the prompt prior to dispatch: the template body is sandwiched between SHARED_DESIGN_DIRECTIVES and the [Input Format] / [User Content] sections.
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
What is happening here: The template strictly 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, factual authenticity, and spacing between Chinese and alphanumeric characters (Pangu spacing).
Shared directives translate hard constraints into explicit prohibitions for the agent and enforce content-driven quantity scaling (numbers in the template serve only as baseline minimums).
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
A subsequent rule in the same file specifies: the number of output slides / frames / cards / sections is determined entirely by the actual length and information structure of the [User Content]—explaining why this category of templates does not break as content grows, requiring at least one card/section per content segment while the template merely provides layout variations.
Actual execution is handled by the coding agent CLI already installed and logged in on the user's local machine: the host spawns a child process, passes the prompt to it, and streams the 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 merely provides prompts; execution capabilities (including code generation and tool usage) stem from the existing permissions of the host CLI; because the skill directory contains no script entry points of its own, grading is based strictly on in-directory assets (host behaviors are excluded from assessment).
/api/convert serves as the template's execution route: it packages skill.body and user content into a prompt and passes it to invokeAgent.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
Edit mode instead routes through buildEditPrompt (minimal-diff editing, file tools disabled, requiring direct streaming of full HTML). Consequently, output artifacts remain structurally stable: single-file HTML, inline CSS/SVG, with external resources limited to web fonts and charting libraries explicitly requested by specific templates.
The template requires charts in the artifact to be rendered by a CDN-hosted charting library: at least 2 charts (bar/line/pie/scatter) using Chart.js or ECharts loaded via jsdelivr CDN, with data parsed from user inputs.
next/src/lib/templates/skills/data-report/SKILL.md
- 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。
This CDN is an artifact-runtime dependency: when the generated HTML is opened in a browser, it fetches chart.js from this endpoint; during skill execution, no fetching, reporting, or asset transmission occurs (endpoint: cdn.jsdelivr.net, see security.reason and verdict.risks), resulting in no risk rating per Batch 4 final criteria.
The template anticipates a specific crash scenario and provides a fix: Chart.js configured with responsive: true and maintainAspectRatio: false triggers an infinite ResizeObserver loop if the parent container lacks an explicit height; therefore, a fixed-height container must wrap the canvas.
next/src/lib/templates/skills/data-report/SKILL.md
**图表容器必须有固定高度**
What is happening here: Hard lessons learned are codified into explicit requirements (KPI sparklines ~40px, main charts ~240–280px), explicitly warning against applying height= directly to canvas for layout purposes—constraints born from real failures demonstrate a high-quality template.
Data authenticity is enforced as the highest-priority discipline: actual user-provided data must be parsed without fabrication.
next/src/lib/templates/skills/data-report/SKILL.md
- **必须解析用户提供的实际数据**, 不要捏造。
This establishes the input contract: structured CSV/Excel/JSON data is mandatory; the example input consists of a 9-row CSV (month,active_users,new_signups,paying,churn_rate).
The report also fixes four types of supporting elements: header (title + date range + data source), KPI cards (metric + YoY change + sparkline), data table (zebra striping/hover states/sticky header), insight blocks (3–5 bullet points prefixed with emojis), and a collapsible methodology section at the footer.
next/src/lib/templates/skills/data-report/SKILL.md
- KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。
The example implements every element: 4 KPI cards with 40px sparklines, 2 canvas elements (260px high) in the main chart area, a table body rendered dynamically from a data array via client script, 3 emoji-prefixed insights, and a <details> collapsible methodology drawer.
The example embeds data as an inline array and uses in-page script to render the table and charts, demonstrating the complete pipeline from user data to DOM structure.
next/src/lib/templates/skills/data-report/example.html
{month:'2024-09', mau:8420, signups:1240, paying:612, churn:0.034},
Within the same script block, new Chart(...) instantiates 4 KPI sparklines and 2 main charts; this is a client-side page script embedded in the artifact (not a skill-side script entry point), bundled with a replaceable data array allowing users to modify data and reuse the page.
Chart container height constraints are implemented verbatim in the example (sparklines at 40px, main charts at 260px).
next/src/lib/templates/skills/data-report/example.html
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi1"></canvas></div>
What is happening here: The mandatory fixed height is turned from a recommendation into a verifiable DOM structure; main charts use identical specifications (position:relative;height:260px), aligning squarely with the 240–280px range defined in SKILL.md.
2Core Capabilities
01Structured data to visual report parsing pipeline (CSV/Excel/JSON input)
02Multi-chart rendering (≥2 charts; example showcases dual-axis bar + line chart, plus 4 KPI sparklines)
03KPI cards (metric value + YoY change + sparkline)
04Data tables (raw data excerpt, zebra striping / hover states / sticky header)
05Key insights blocks (3–5 written insights, prefixed with emojis)
06Collapsible methodology drawer at the footer (metric definitions and scope)
07Defensive rules against known failure modes (fixed-height container preventing ResizeObserver infinite loops)
08Data authenticity enforcement (mandatory use of actual user data without hallucination)
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: Composed strictly of prompt directives and rule text; contains no executable scripts or external runtime impacts
Audit Notes: Grading is based solely on the skill's own directory contents: data-report/ contains only SKILL.md + example.html + example.md, with no built-in CLI, credential reads, or disk-write commands; execution-time network traffic is zero (the <script> inside example.html is an in-artifact rendering script, not an entry point on the skill side). SKILL.md:22 specifies the jsdelivr CDN ('Use Chart.js or ECharts (loaded via jsdelivr CDN)'), pointing to cdn.jsdelivr.net, and example.html:7 loads the chart.js@4.4.0 UMD bundle. Under the final Batch 4 guidelines, this is classified as an **artifact-runtime reference**: the generated HTML fetches this static library only when opened in a browser; the skill runtime does not fetch, report, or transmit user data to any endpoint (data is embedded exclusively within the artifact itself), thus posing no rating penalty, and the endpoint is documented here for transparency. Note: The artifact executes page scripts to render data and draw charts within the host preview panel's sandbox="allow-scripts allow-same-origin"; this sandbox configuration and CLI spawning are host-managed behaviors and are excluded from the skill's rating, recorded instead under verdict.risks.
5Second-Pass Verification
- [ok] 图表容器高度规范 vs 示例实现 — SKILL.md 要求 canvas 外层包固定高度 div（KPI ~40px、主图 240–280px）且禁止给 canvas 写 height 属性；示例全部命中（40px×4、260px×2，canvas 无 height 属性）。
- [ok] 数据一致性（产物 ↔ 示例输入） — example.html 的 data 数组与 example.md 的 CSV 9 行数值一一对应（如 2025-05: mau 23950 / signups 4250 / paying 2418 / churn 0.018），证明解析用户数据的执行路径可复现。
- [ok] 端点性质（产物期 vs 执行期） — SKILL.md:22 逐字命中「使用 Chart.js 或 ECharts (jsdelivr CDN 引入)」；example.html:7 为 chart.js@4.4.0 的 jsdelivr 链接。库由浏览器加载产物时取用，属产物期引用（批4 终版口径不判级），故维持 green；端点已列入 security.reason 与 verdict.risks。
- [ok] 「至少 2 个图表」是否达标 — 示例有 chart-main（柱状覆盖双轴折线）与 chart-churn（折线）两张主图，另有 4 条 KPI 迷你趋势线，超过最低要求；图表类型在 SKILL.md 列出的柱状/折线范围内。
- [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: Ideal for rapidly turning structured data into publishable report pages: weekly/monthly product reports, operational reviews, experiment readouts, and one-page financial summaries. Yields optimal results when data is provided in CSV/JSON with clearly defined metric scopes (e.g., the 9-month growth dataset in the example).
Not for: Not suitable for text-only layouts lacking structured data (template strictly requires parsing actual metrics); not suitable for offline or air-gapped environments (artifact fetches charting libraries via CDN; use the inline SVG approach from dashboard instead); not suitable for BI dashboards requiring interactive filtering or drill-downs (pure static rendering without reactive data-binding frameworks).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload data-report.tar.gz
sha256:
Option B · Copy Guide for Agentdecfcd8af87ff5e9…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.