Docs & Knowledge · nexu-io/html-anything
docs-page
Three-column documentation page: sidebar navigation + main content + right-hand TOC
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
This skill is not an executable program, but rather "one directory = one template": SKILL.md's frontmatter is for the selector display, and its body is the prompt sent to the model; adding a template means adding a directory, requiring no changes to TypeScript.
next/src/lib/templates/loader.ts
routes rescan disk and the client refetches `/api/templates`.
Header comments in the same file define the directory convention: SKILL.md (frontmatter + prompt body) / example.md (optional sample input) / example.html (optional preview). This skill directory precisely follows this structure.
The actual dispatched prompt = platform shared design directives (SHARED_DESIGN_DIRECTIVES) + this skill's SKILL.md body + user content, assembled into a single prompt by assemblePrompt.
next/src/lib/templates/shared.ts
Wrap a per-template instruction body with the shared design directives and
Therefore, the body of this skill is only responsible for the "layout / style / component library" section; output discipline (single-file HTML, must use real user data, content-driven quantity) comes from the shared directives, eliminating the need for template authors to declare it redundantly.
Generated deliverables bypass the file system: shared directives explicitly forbid file tools like Write/Edit/Bash, requiring the model to stream the entire HTML directly as the response body (stdout is captured and written to disk by the frontend).
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
This is the source of the "skill itself has zero disk writes" mechanism: it is the host frontend that writes files, not the skill; there are also no scripts inside this directory.
The three-column skeleton is defined by a single grid declaration: 240px sidebar + flexible main content + 220px right TOC, gracefully degrading to two columns or one column on narrower screens.
next/src/lib/templates/skills/docs-page/example.html
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 0; min-height: calc(100vh - 50px); }
.toc is hidden below 1024px, .sidebar is hidden below 720px, and the main content max-width is set to 760px to preserve comfortable line length for long-form reading—aligning with the "long-form reading experience first" principle in SKILL.md.
The main content consists of four block types: "code blocks + callouts + tables + pager". The sample uses quickstart documentation for a fictional CLI (Filebase) to demonstrate all block types.
next/src/lib/templates/skills/docs-page/example.html
<title>Filebase docs — Quickstart</title>
Four sample sections: Install the CLI (brew or curl) → Authenticate (token path) → Sync a folder (.filebaseignore) → Where to go next (pager).
Callouts are implemented with a single accent left border (--accent #c96442) in only one variation, lacking the three info/warn/danger colors mentioned in SKILL.md.
next/src/lib/templates/skills/docs-page/example.html
.callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 14px 18px; margin: 20px 0; font-size: 14px; }
This is a classic case of "prompt requirements exceeding sample implementation": SKILL.md specifies "callout: info / warn / danger three colors", but the sample only implements one.
The right-hand TOC is a purely static anchor list (heading + #link + .active highlight). The sample contains no scripts, so features mentioned in SKILL.md like scroll-spy, copy buttons, and theme toggling do not exist in the sample.
next/src/lib/templates/skills/docs-page/example.html
<aside class="toc" data-od-id="toc">
A full-text grep for <script yields zero matches, with no addEventListener and no clipboard calls; "scroll-spy", "code block copy button", and "theme toggle" exist only in the prompt, requiring the model to add JS on its own to realize them (while shared directives require scripts to be imported only from jsdelivr).
The top bar only contains brand + search input box, lacking the version selector and theme toggle controls mentioned in SKILL.md.
next/src/lib/templates/skills/docs-page/example.html
<input placeholder="Search · ⌘K" />
⌘K is merely placeholder text without keyboard event handling logic; this reflects the standard pattern where "the sample is a static freeze-frame, leaving interactivity to the model/host". Avoid treating the sample as a strict feature checklist during verification.
The server-side /api/convert performs only three tasks: read the skill from disk by templateId, assemble the prompt, spawn the local agent CLI, and forward the output via SSE stream.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
In the same file, `const skill = loadSkill(templateId);` is called first (returning 400 if the template does not exist), and then passed to invokeAgent; the skill directory itself produces no processes and performs no networking.
2Core Capabilities
01Three-column technical documentation page layout (sidebar nav + main content + right TOC) with automatic responsive breakdown on narrow screens
02Sidebar navigation grouping + active item highlighting + sticky positioning
03Right-hand TOC anchor list mapped one-to-one with main content sections
04Code blocks (light background + rounded corners + horizontal overflow scroll) hosting install/sync commands
05Callout alert blocks (accent left border + uppercase/lowercase labels)
06Bottom pager (previous/next page cards) and breadcrumbs
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: Evaluation target = the skill's own directory (SKILL.md + example.html/example.md, containing zero scripts, zero credential access, zero disk-write directives, and no network invocation code). Under Batch 4 final criteria, html-anything templates are uniformly rated green: SKILL.md does not reference any runtime service backend/API, nor does it send user material to external generation backends (no orange criteria); no reverse engineering, impersonation, or backend bypassing (no red criteria). The only endpoints appearing in the directory are deliverable sample external links (None: example.html contains no external links whatsoever—no font links, no CDN scripts, no image URLs; only <a href="#"> anchors and local IDs), which are classified as "deliverable samples" and not evaluated per criteria, listed here only for transparency. For host-side awareness: the preview iframe uses sandbox="allow-scripts allow-same-origin", a local agent CLI is spawned (next/src/lib/agents/invoke.ts), and shared directives require the final output to import CDNs—these are platform behaviors, documented here for context only.
5Second-Pass Verification
- [ok] 三栏文档页（侧导航 + 正文 + 右 TOC） — .layout 三列 240px / minmax(0,1fr) / 220px，且 1024px 隐藏 TOC、720px 隐藏 sidebar。
- [discrepancy] 「Inline-end TOC (sticky, scroll-spy)」 — TOC 存在，但 .toc 是普通 padding 布局、无 position:sticky，也无 scroll-spy 脚本（全文零 <script>）；高亮 .active 是写死的。
- [discrepancy] 「代码块: 圆角 + dark + 语言标签 + 复制按钮」 — 样例代码块为圆角浅底（--code-bg:#f4f4f2），无 dark 主题、无语言标签、无复制按钮。
- [discrepancy] 「callout: info / warn / danger 三色」 — 只有一种 accent 左描边 callout，无三色档位。
- [discrepancy] 「顶栏 search + version + 主题切换」 — 顶栏仅 brand + Search · ⌘K 输入框；无 version 标签、无主题切换控件。
- [ok] 样例正文的虚构 CLI 与外链 — get.filebase.dev 是虚构产品域的示例命令（curl -fsSL … | sh）、~/.config/filebase/credentials 为虚构凭证路径；属演示文本，不是本 skill 的运行时依赖。
- [ok] 目录内零端点、零脚本 — 两文件皆无 <script>、无字体/CDN 链接、无图片 URL。
6Verdict & Scenarios
Best for: Ideal for API references, SDK quickstarts, and tutorial single-page documentation; suitable for technical content requiring a three-column navigation system and comfortable long-form reading; also well-suited as a static snapshot deliverable for a "single-page docs site".
Not for: Not suitable for documentation sites requiring full interactivity (no JS: search, scroll highlighting, and theme toggle must be built separately); not suitable for marketing landing pages or brand pages with strong visual emphasis; not suitable for mobile-first scenarios (desktop 1440px prioritized, narrow screens are fallback only); not suitable for multi-page documentation architectures (this template is single-page).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload docs-page.tar.gz
sha256:
Option B · Copy Guide for Agent4277f1338716aa4d…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.