Home / All Skills / Content & Media Creation / article-magazine
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · nexu-io/html-anything

article-magazine

Premium Substack / Medium-style long-form article layout, ideal for WeChat Official Accounts and blog publishing

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE：Apache License Version 2.0, January 2004；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

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 together 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 entire body serves as the prompt; the loader performs no semantic validation and emits whatever is written in the template.

The host pre-assembles the prompt before dispatch: the template body is sandwiched between SHARED_DESIGN_DIRECTIVES and the [Input Format] / [User Content] blocks.

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 artifact 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 CJK-English spacing (Pangu spacing).

Shared directives translate hard constraints into explicit agent prohibitions and enforce content-driven quantity (numbers in the template serve only as reference lower bounds).

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
Later in the same file is another rule: the number of output slides/frames/cards/sections is entirely determined by the actual length and information hierarchy of [User Content]—this explains why templates of this type do not break as content grows: each section of content gets at least one card/section, with the template merely providing the layout palette.

Execution is performed by the coding agent CLI already installed and logged in on the user's local machine: the host spawns a child process, delivers 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 only provides prompts; capabilities (including code generation and tool execution) originate from the existing permissions of the host CLI; the skill directory itself contains no script entry points, so grading evaluates only assets within the directory (host behavior is not factored in).

/api/convert is the execution path of the template: it packages skill.body and the 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 (minimizing diff edits, disabling file tools, and requiring direct streaming of the complete HTML). Consequently, artifacts from this template type maintain a stable form: single-file HTML, inline CSS/SVG, and external links restricted solely to fonts and chart libraries explicitly requested by specific templates.

The template deconstructs a "magazine long-form article" into an itemized layout checklist (hero → single-column body → serif subheadings → blockquote/code blocks → centered ornament → closing card), allowing the agent to fill in content according to the checklist without inventing layouts.

next/src/lib/templates/skills/article-magazine/SKILL.md
- 顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。
What is happening here: Translating the vague demand for a "premium feel" into actionable items—heading font sizes are explicitly defined via Tailwind classes, metadata is fixed to three items, and subtitles are marked optional; this gives the template a highly stable output surface.

Readability is quantified: the body text is constrained to a 700px centered single column, creating contrast with serif headings against sans-serif body text.

next/src/lib/templates/skills/article-magazine/SKILL.md
- 正文: 单栏, 最大宽度约 700px, 居中。
The same section provides concrete Tailwind class names and dual light/dark body color schemes (text-lg leading-relaxed text-neutral-700 dark:text-neutral-300); word count density, line-height, and maximum width are hardcoded variables to prevent long articles from stretching full-width.

The editorial magazine aesthetic beyond the body text relies on three dedicated components: italic blockquotes with a left accent border, a centered ornament divider, and an end-of-article call-to-action card.

next/src/lib/templates/skills/article-magazine/SKILL.md
- 引用块使用左侧粗 accent 色边线 + 斜体。
These three elements are structural requirements rather than decorative checklists: in example.html, they are implemented as blockquote styles, an ornament section, and a footer card, respectively, allowing item-by-item verification.

The example artifact serves as a 1:1 implementation reference: single-file HTML, inline stylesheets, Tailwind CDN + Google Fonts, with the body hero/blockquote/ornament directly mapping to SKILL.md entries.

next/src/lib/templates/skills/article-magazine/example.html
<div class="ornament"><span class="serif italic">· · ·</span></div>
What is happening here: Visualizing the directive to "separate chapters with <hr> styled as a centered small ornament"; the agent can directly reuse this DOM structure. (Referenced Tailwind and fonts are artifact-stage fetches; see security.reason).

The template is published paired with an example input (Markdown): frontmatter declares the input form using example_format: markdown, and the example body consists of an existing long-form article with an attribution link to the original tweet.

next/src/lib/templates/skills/article-magazine/example.md
# 我读完 @trq212 那条推之后, 把所有 markdown 都换成了 HTML
What is happening here: The selector prompts the user with "just paste Markdown" based on example_format; example_source_url points to the original tweet on x.com, providing the site with a linkable source attribution.

2Core Capabilities

01Magazine long-form single-page layout (hero + author metadata + single-column 700px body)
02Serif heading / sans-serif body font family pairing
03Blockquote: thick left accent border + italic styling (example uses serif italic + neutral colors)
04Editorial magazine-style code block (rounded corners, dark background with light text, language tag)
05Section dividers rendered as centered ornaments (rather than a plain hr)
06End-of-article call-to-action card (implemented in the example as a "hero image credit + original tweet link" card)

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 impact
Audit Notes: Grading is determined solely by the skill's own directory (containing only three files: SKILL.md + example.html + example.md, 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 write instructions; the SKILL.md body does not request loading any external endpoints at runtime (specifying only font sizes, max-widths, font families, and Tailwind class names). No outbound requests occur during execution. The only endpoints actually present in the directory are cdn.tailwindcss.com, fonts.googleapis.com, and fonts.gstatic.com in example.html:7-10, alongside original tweet source links to x.com in the frontmatter and body. Under the Batch 4 final criteria, these constitute **artifact-stage 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 do not affect the safety rating, listed here purely for disclosure; host wrapper mechanisms (loader → assemblePrompt → local agent CLI spawn, preview iframe sandbox) are host behaviors and are logged under verdict.risks.

5Second-Pass Verification

  • [ok] 「执行期是否有外发」判定 — SKILL.md 正文 URL 计数为 0；唯一 http(s) 出现在 frontmatter 的 example_source_url（示例出处标注）与 example.html 的 CDN/字体链接，属产物期引用（浏览器端拉取），按批4 终版口径不判级。
  • [discrepancy] 文末行动卡片 — SKILL.md 要求文末加一个简单的「如果觉得有用，欢迎转发」行动卡片；example.html 结尾实现为「题图致敬: 推文中那个 "everything is HTML" 的瞬间。」+ 原推链接卡。属示例自由发挥（同类结构、不同文案），不影响模板可用性，但详情页不应把该示例卡当作模板固定文案。
  • [ok] featured 推荐位 — frontmatter featured: 11，选择器会将其纳入 Featured/推荐分组；example_* 六个字段齐全，loader 会生成 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

  • Layout recipes are specified down to concrete items and values, breaking down the "magazine aesthetic" into six verifiable components: hero / 700px single column / serif subheadings / blockquotes / ornaments / cards.
  • The example doubles as acceptance criteria: example.html reproduces every specialized component from SKILL.md (blockquote/ornament/inline code/footer card) for side-by-side verification.
  • Imposes strict readability constraints on long-form content (700px single column + light/dark dual text colors + line height), rather than leaving whitespace distribution to model hallucination like generic templates.
  • Input format is bound to the example (example_format: markdown), enabling the selector to provide accurate input prompts and allowing the site details page to display a Markdown-to-HTML comparison.
    • Best for: Ideal for one-shot layout rendering of long articles on WeChat Official Accounts, blogs, or Substack: author provides Markdown long-form copy and receives a premium, publication- or screenshot-ready single-page HTML within seconds. Also well-suited as a long-form template baseline (the hero + single column + quote/code block combination is the most reliable).
    Not for: Not suitable for scenarios requiring multi-page or multi-column magazine layouts (the 700px single column is a hard constraint); not suitable for content requiring interactive widgets or charts (the template imports no scripts); not suitable for inputs that only need short cards or posters (choose card-* or poster-type templates instead).
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload article-magazine.tar.gz
    sha256: 115f78654ca46dcd…
    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.