Content & Media Creation · nexu-io/html-anything
blog-post
Magazine-style long-form article featuring a masthead, hero section, figures, pull quotes, and author byline
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 the 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 is the sole source of behavior—frontmatter is used for selector rendering (zh_name/emoji/aspect_hint/tags/example_*, etc.), and the body serves entirely as the prompt; the loader performs no semantic validation and simply passes through whatever is written in the template.
The host assembles the prompt in a fixed structure 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 hard constraints across templates—single-file HTML, prohibition of file tools, loading Tailwind and Google Fonts via CDN, content authenticity, and CJK-Latin spacing (Pangu spacing).
Shared directives formulate hard constraints as explicit prohibitions for the agent and enforce that output quantity is content-driven (numbers in the template serve only as minimum reference baselines).
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
Further down in the same document is another rule: the number of output slides/frames/cards/sections is strictly determined by the actual length and information structure of the [User Content]—this explains why templates of this type do not break as content grows longer: at least one card/section per piece of content, with the template merely providing a layout pool.
The 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 captures HTML streamed from stdout.
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
What is happening here: The template skill only provides prompts; the actual capabilities (including writing code and running tools) stem from the existing permissions of the host CLI. The skill directory itself has no script entry points, so grading is based solely on the assets within the directory (host behaviors are not factored into the tiering).
/api/convert is the execution path for templates: it combines skill.body with 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 follows a separate buildEditPrompt path (minimal diff editing, disabling file tools, requiring direct streaming of the complete HTML). Consequently, outputs from templates of this type maintain a stable form: single-file HTML, inline CSS/SVG, with external links limited strictly to fonts and charting libraries explicitly requested by specific templates.
The template begins with typography-first proportion constraints (70% text / 20% images / 10% chrome) and requires ≥600 words, directly excluding short image-text card inputs.
next/src/lib/templates/skills/blog-post/SKILL.md
【意图】≥ 600 字的真正的长文章, 排版以 typography 为主, 70% 文字 20% 图 10% chrome。
What is happening here: Defining 'magazine feel' through proportions rather than adjectives—the main text takes center stage, while graphics and decorative elements are kept minimal to prevent the model from cluttering a long-form article with cards.
The skeleton is fixed into five sections: Masthead → Hero → single-column 65ch body → Author bio card → Related posts (three cards).
next/src/lib/templates/skills/blog-post/SKILL.md
- Masthead (publication name + date)
The same section specifies a 65ch body container width along with 'contains figures, pull quotes, inline citations', establishing requirements for three types of inline elements within the body; combined with the hero's metadata (author byline + reading time), this forms a complete publication layout.
Three typographic details are specifically mandated: pull quotes (large serif italics + left accent border), figures with italic captions, and rounded dark code blocks with language tags.
next/src/lib/templates/skills/blog-post/SKILL.md
- Pull quote 用大号 serif 斜体 + 左侧色条
Figure captions must be italic and smaller; code blocks share the exact specifications of article-magazine, reusing the same design language for visual consistency across templates.
The example deliverable is implemented using pure inline CSS + system font stacks (no Tailwind, no font CDN, zero URLs throughout), serving as proof of this template's zero-external-dependency approach.
next/src/lib/templates/skills/blog-post/example.html
font-family: -apple-system, system-ui, sans-serif
What is happening here: The example realizes the magazine aesthetic through typographic details (masthead thin rule, lede, byline avatar placeholder, hero-figure, numeric stat blocks, blockquote), opening seamlessly without relying on any external resources.
The example body implements skeleton elements such as hero/lede/byline/hero-figure/pull quote/figures, but omits the Author bio card and three Related posts cards required by SKILL.md.
next/src/lib/templates/skills/blog-post/example.html
<figure class="numbers">
The figure here is a three-stat metric display block in the body (e.g., 38ms → 4ms), satisfying the figures requirement; however, the example ends directly with an endnote recruitment card, omitting the bio / related posts section—recorded as a discrepancy, with template capabilities officially governed by SKILL.md.
2Core Capabilities
01Long-form article skeleton: Masthead + Hero (large title + subtitle + author byline + reading time)
0265ch single-column body container (including three types of inline elements: figures, pull quotes, and inline citations)
03Pull quote: large serif italics + left color accent border
04Figures with built-in captions (italic, smaller font size)
05Code blocks: rounded corners + dark theme + language tag (sharing the same specification as article-magazine)
06Footer layout slots: SKILL.md requires an Author bio card + 3 Related posts cards (unimplemented in the example; see verification)
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, with no script execution or external impact
Audit Notes: Grading is based strictly on the skill's own directory (containing only two files: SKILL.md + example.html, with no scripts/, no bundled CLI, no credential reading, and no disk-write operations): no script entry points, no bundled CLI, no credential reading, and no disk-writing directives; the body of SKILL.md does not require introducing any external endpoints at runtime (it only specifies layout sections, inline element types, and font styles, without endpoints). No outbound network traffic occurs during execution. The endpoints actually appearing in the directory exist solely within example.html as zero URLs and zero <script> tags (pure system font stack inline CSS)—there are no network endpoints within the directory. According to the Batch 4 final criteria, these qualify as **artifact-time references** (the generated HTML fetches CDN/fonts when opened by a browser, but the skill does not scrape, report, or transmit assets during execution), and thus are not subject to risk rating, with endpoints merely listed here; the host shell (loader → assemblePrompt → local agent CLI spawn, preview iframe sandbox) similarly belongs to host behavior and is logged under verdict.risks.
5Second-Pass Verification
- [discrepancy] 示例覆盖度 vs SKILL.md 骨架 — SKILL.md 要求五段骨架，example.html 实现了 Masthead / Hero / 正文 / 三处细节，但缺 Author bio 卡片与 Related posts（3 张卡）——示例结尾为 .endnote 招募卡。详情页不宜把该示例当作模板完整形态。
- [ok] 「零外链」判定 — blog-post/ 目录内 http(s) 命中数为 0，<script> 命中数为 0；字体为 -apple-system/system-ui/monospace 等系统字族，执行期与产物期均无外发。
- [ok] 无 example.md 的后果 — 目录只有 SKILL.md + example.html；loader 的 metaFromDir 以 existsSync 判定 hasMd=false，选择器仍会因 hasHtml=true 生成 example 元数据，行为正常。
- [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 authentic long-form deliverables: technical postmortems, corporate blogs, in-depth commentary, and interview transcripts—especially suited for scenarios requiring refined typography and offline viewability (the example uses pure inline CSS + system font stacks).
Not for: Not suitable for short content or image-text cards (≥600 words and 65ch single column are strict constraints); not suitable for reports requiring multi-column magazine layouts or rich interactivity; not suitable for scenarios strictly requiring proprietary brand fonts/colors (the template does not prescribe font stacks, requiring explicit user specifications).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload blog-post.tar.gz
sha256:
Option B · Copy Guide for Agent95b69396ce0f37a7…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.