Docs & Knowledge · nexu-io/html-anything

social-media-dashboard

Name: social-media-dashboard
Author: nexu-io/html-anything

Platform switcher + followers/engagement KPI + growth curve + Top post + trending topics

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE = Apache License 2.0；GitHub API spdx_id=Apache-2.0）Commit 553ed98c28

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

This template is purely data within a "folder-as-template" architecture: SKILL.md uses YAML frontmatter for the picker, and its body serves as layout directives for the agent; the repository writes no code for individual templates, and adding a new template simply means adding a folder.

next/src/lib/templates/loader.ts

SKILL.md — frontmatter (id, scenario, tags, …) + prompt body

loader.ts explicitly states the directory convention in its file header comments; frontmatter is parsed via in-process regex (no YAML dependencies), and the body is extracted verbatim as the prompt body without being exposed to the frontend ("Body is excluded so we can return the entire registry in one cheap fetch without shipping prompt text to the browser.").

At runtime, the host sandwiches this template's body between shared design directives and user content to assemble a single prompt — the template's "intelligence" resides entirely within this natural language, with zero executable code.

next/src/lib/templates/shared.ts

return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}

assemblePrompt returns "shared design directives + template body + [Input Format] + [User Content]". The shared section (SHARED_DESIGN_DIRECTIVES in the same file) handles mandatory constraints such as single-file HTML, Tailwind/font CDNs, content-driven quantities, and forbidding filesystem tools; it is uniform across all templates and not intrinsic to this template.

After loading this template, the host's /api/convert delivers this text to a locally authenticated coding-agent CLI, streaming stdout back as HTML; the template itself initiates no network requests, reads no credentials, and writes no files.

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

The same route then invokes invokeAgent({ … }) to spawn the CLI (claude / codex / cursor-agent, etc., probed via host PATH); its accompanying shared directives also explicitly state "**Do NOT use Write / Edit / MultiEdit / Bash / Create / any filesystem tools**".

The accompanying example.html is a "pre-rendered example" served as-is by the preview endpoint into the picker and gallery iframe — it determines whether the template card has a visual preview and does not participate in content generation.

next/src/app/api/templates/[id]/preview/route.ts

Returns the skill's `example.html` verbatim so it can be loaded into an

Previews are cached by skill id (Cache-Control: public, max-age=300); the frontend sets sandbox="allow-scripts allow-same-origin" on the iframe in the preview panel (a host-side implementation out of this template's control).

Frontmatter fields are mapped item-by-item into picker metadata (featured determines global sorting, recommended enters the top "★ Recommended" group, example_* generates example card copy), defining where it appears within category/scenario filters.

next/src/lib/templates/loader.ts

if (typeof fm.featured === "number") meta.featured = fm.featured;

fmToMeta concurrently transfers category/scenario/aspectHint/tags directly into SkillMeta; the example block is generated when example_id or example.{md,html} exists (id/name/format/tagline/desc + optional source). These fields only affect display and sorting, not generation behavior.

The template's generative capabilities are fulfilled entirely by its own body: social-media-dashboard/SKILL.md describes only layout, color palette, typography, and content guidelines, without a single line instructing the agent to run tools, call endpoints, or fetch external data.

next/src/lib/templates/skills/social-media-dashboard/SKILL.md

【模板: 社媒创作者仪表板】

The skill directory contains only 2–3 files in total (SKILL.md + example.html[+ example.md]), without scripts/references/data files; example.html is merely a manually crafted example artifact of the same template (see internal_assets).

The body defines fixed dashboard sections: platform switcher, KPIs, growth curve, Top post, and sidebar trends/comments.

next/src/lib/templates/skills/social-media-dashboard/SKILL.md

【意图】面向博主 / 创作者的社媒数据看板。

The platform switcher lists five platforms—X / LinkedIn / YouTube / Instagram / TikTok—effectively demanding "reusing the same dashboard across different data sources".

next/src/lib/templates/skills/social-media-dashboard/SKILL.md

- 顶部平台 switcher (X / LinkedIn / YouTube / Instagram / TikTok)

The KPI group is restricted to four social metrics: followers / engagement / likes / reposts.

next/src/lib/templates/skills/social-media-dashboard/SKILL.md

- KPI 卡片 (followers / engagement / likes / reposts)

The example artifact uses inline JS to achieve platform switching and full-screen re-rendering (switching hero, KPIs, charts, Top post, and active highlight states).

next/src/lib/templates/skills/social-media-dashboard/example.html

function switchPlatform(platform) {

Charts are not static images: the example creates SVG line/area charts on the fly with JS, with annotation points also generated dynamically by script.

next/src/lib/templates/skills/social-media-dashboard/example.html

const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');

2Core Capabilities

01Multi-platform switching (reusing the same dashboard across platform data sources)

02KPI card group (followers / engagement / likes / reposts)

03Follower growth curve (drawn on the fly in the example via inline SVG + JS, with annotation points)

04Top post preview of the week (including likes/reposts/comments counts)

05Sidebar trending topics / Top comments

06Platform switching interaction in the example artifact (.platform-pill + data-platform)

07KPI value presentation in the example artifact (including formatted figures and change rates)

3External Dependencies

Kind	Dependency / Endpoint
network	Google Fonts（仅出现在产物示例 example.html）
network	第三方头像图床（仅出现在产物示例 example.html 的内联脚本数据里）
cli	本地 coding-agent CLI（宿主提供，模板自身不调用）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Graded/per-use authorization, sandbox recommended

For Administrators

Approval workflow, rollback support, full audit

Evidence & Triggers (File Paths & Excerpts)

scripts/: Execute local script or command: inline <script> in example.html (browser-side: platform switching, KPI formatting, SVG line/area plotting, contributor grid) — only inside picker preview ifra
网络端点: Declare external network access: fonts.googleapis.com (<link> in example.html, font requested by the browser during preview)

Audit Notes: The evaluation target is this skill directory (SKILL.md + example.html[+ example.md]): no bundled scripts, no credential access, no disk-write commands, and no external runtime endpoint requirements—the body only specifies layout/palette/font family names and content disciplines; font family names do not constitute requests. All external links appearing in the directory are purely "artifact example" in nature and verified item by item: fonts.googleapis.com (lines 8-10 <link> in example.html), avatars.githubusercontent.com (5 GitHub avatars loaded via <img src> in the inline script of example.html); no Tailwind CDN. Under Batch 4 criteria (endpoints appearing only in artifact examples/citations → green), this does not affect the rating tier. Host-side behaviors (loader.ts reading disk, assemblePrompt assembling prompts, agents/invoke.ts spawning local CLI, preview iframe sandbox="allow-scripts allow-same-origin") are documented in verdict.risks and do not serve as grounds for tier assignment.

5Second-Pass Verification

[ok] skill 目录的脚本 / 网络 / 凭证 / 写盘面 — 目录仅 SKILL.md / example.html 2 个文件，无 scripts/references/数据目录；token 扫描（curl / wget / fetch / exec / spawn / process.env / API_KEY / token / secret / write / save / delete）在该目录的 SKILL.md 中零命中；无自带可执行脚本。
[ok] 运行时链路复核 — 重读 loader.ts / shared.ts / app/api/convert/route.ts / app/api/templates/[id]/preview/route.ts：模板正文只作为 prompt body 被 assemblePrompt 拼装，宿主 spawn 本地 CLI 并捕获 stdout；模板不参与任何执行。
[ok] commit 与元数据 — 工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（＝任务表 pin 的 full 40 位）；GitHub API nexu-io/html-anything：stars 8827、license spdx Apache-2.0、pushed_at 2026-09-15T03:36:24Z（与本地 HEAD 提交时间 2026-09-15 11:36:24 +0800 一致）。
[discrepancy] README 与源码的 frontmatter schema 漂移（仓库级） — README 第 213 / 217 / 468 行称模板 frontmatter 必须含 mode · scenario · surface · preview · design_system；但在 next/src/lib/templates/skills/ 下 '^mode:'、'^surface:'、'^design_system:' 全部零命中，实际字段是 category / scenario / aspect_hint / featured / recommended + example_*（loader.ts 的 SkillFrontmatter）。文档滞后于代码，不影响本模板运行，但照 README 新写模板会踩空。
[ok] frontmatter 元数据映射 — loader.ts fmToMeta 逐字段映射 zhName / enName / emoji / description / category / scenario / aspectHint / tags + featured / recommended + example 卡；本模板取自 SKILL.md 的实际取值与之相符。
[discrepancy] example.html 与 SKILL.md 的一致性（平台数量） — 正文写 '- 顶部平台 switcher (X / LinkedIn / YouTube / Instagram / TikTok)'，示例 HTML 只渲染两个按钮（data-platform="x" 与 data-platform="github"）；内联 platformData 里确有 x/linkedin/youtube/instagram 四套数据，GitHub 走贡献者分支。只看示例会以为平台只有两个。
[discrepancy] 外部图片 URL 与仓库共享指令相左 — shared.ts 的共享指令要求「不要引用任何外部图片 URL」，但本模板的 example.html 把 5 个 GitHub 头像写成 https://avatars.githubusercontent.com/u/… 绝对地址并在 <img src> 里加载，是该产物唯一会向第三方图床发请求的地方（作为示例产物可接受，但用户直接复用示例时会带上外部依赖）。
[ok] 端点扫描（目录内） — 2 类端点：fonts.googleapis.com（Space Grotesk / Inter）与 avatars.githubusercontent.com（5 个头像）；无 Tailwind CDN；SKILL.md 正文零 URL。

6Verdict & Scenarios

Covers all metrics creators care about in a single screen (KPIs + growth curve + Top post + trends + comments)

Platform switching is interactive rather than static: the example re-renders the whole screen on the fly using platformData + switchPlatform()

Charts are drawn live with SVG, independent of any chart library CDNs

The example artifact includes production-ready typographic details (KPI metrics, change rates, platform pill active states)

Self-contained sample data without needing example.md; visually complete out of the box, ideal as a design benchmark

Best for: Ideal for creators or operations teams organizing weekly or monthly social media performance into a single-screen dashboard (especially scenarios requiring "switching platforms to view the same metric set"); also suitable as a visual baseline for social data pages.

Not for: Not suitable for scenarios requiring live data integration (this template does not fetch data or connect to APIs; data relies on user input or model generation), narrow mobile screens (aspect_hint explicitly specifies desktop 1440), or rigorous reporting (lacks data provenance attribution and export structures).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload social-media-dashboard.tar.gz

sha256: 5c0986485a0bc508…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.