Design & Motion · nexu-io/html-anything
magazine-poster
Sunday-paper style, large serif headline + two-column body text + numbered sections
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
Newsprint editorial layout: dateline top bar (publication / date / issue) → oversized serif headline (including strike-through words + italic accent) → two-column body text → 6 numbered sections (each paired with a pull-quote) → bottom footer signature/ornament.
next/src/lib/templates/skills/magazine-poster/SKILL.md
- Oversized serif headline (含 strike-through 词 + 斜体 accent)
The example implements the dateline as two top-rule items (`01 · AI ENTHUSIAST` and `17 · APR · 2026`), serving as the key identifier for a "full-page newspaper".
The paper texture consists of a warm-grey cream background + black text, implemented with the sample palette `--paper: #f3eee2`.
next/src/lib/templates/skills/magazine-poster/SKILL.md
- 纸感: 暖灰 cream 背景 + 细 dot pattern, 黑字
The body text additionally requires a fine dot pattern; the example uses --rule/--tint secondary colors to maintain a print-like texture.
Fonts are specified as Playfair Display + IBM Plex Serif + JetBrains Mono.
next/src/lib/templates/skills/magazine-poster/SKILL.md
- 字体: Playfair Display + IBM Plex Serif + JetBrains Mono
The example actually uses Playfair Display only as the display variable, falling back to Iowan Old Style/Charter for body serifs, and IBM Plex Mono for monospace—see the discrepancies in the confirmation table.
The template itself is the prompt: SKILL.md body text is read by the loader, assembled with the shared preamble and user content, and handed over to the local agent CLI for execution.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
No code in the template directory is executed at runtime: /api/convert only receives {agent, templateId, content}, uses loadSkill(templateId) to fetch the SKILL.md body text as the primary prompt body, and hands it to the logged-in local agent CLI; HTML streams back to the frontend via stdout.
The skill directory consists of purely text assets: the loader reads SKILL.md body text from disk, and no executable code within the directory is loaded.
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
Skills in the file system are merely text: the loader reads SKILL.md across directories, extracts frontmatter as picker metadata, and returns the body as the prompt; no modules inside this template directory are imported or executed.
The shared preamble is injected before the template, establishing as highest priority that 'the template only defines layout/style/palette/fonts/component library, while the quantity is determined by user content'.
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
The shared preamble is injected prior to the template body, specifying that 'the template only defines layout/style/palette/fonts/component library, while the quantity is determined by user content'—hence the layout list in this template acts as a 'reusable layout pool', not a hard limit on page/frame count.
The shared preamble is injected before the template, establishing as highest priority that 'the template only defines layout/style/palette/fonts/component library, while the quantity is determined by user content'.
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
The preamble explicitly prohibits file system tools and mandates streaming pure HTML output directly from the response body, leaving disk writes to the frontend—thus, there are no disk-writing behaviors on the skill side.
The skill directory consists of purely text assets: the loader reads SKILL.md body text from disk, and no executable code within the directory is loaded.
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
The example.html in the directory is a golden sample distributed with the repository; the preview route directly reads it from disk and returns it (no build, no compilation), serving as both a quality baseline and detail page asset.
2Core Capabilities
01Newspaper-style oversized serif headline (strike-through + italic accent)
02Two-column body grid
036 numbered sections (examples cell-1..cell-6, each with a pull-quote)
04Strike-through rhetoric (strike-through words)
05Dateline top bar (publication name + date)
06Vertical long poster (aspect_hint: vertical long image)
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 instructions and rule text, without script execution or external impact
Audit Notes: 🟢 Green. Target of evaluation = the skill directory itself: zero URLs within the directory (example.html contains no http(s) endpoints either). The directory contains only SKILL.md and example.html, with zero scripts, zero executable code, zero network endpoints, zero credential reads, and zero disk-write instructions—executing according to SKILL.md results in the host model outputting an HTML text snippet without any external transmission or disk-writing action. Host shell and consumer-side behaviors do not serve as criteria for grading and are only recorded under verdict.risks: the shared.ts preamble requires the output to reference Tailwind CDN (https://cdn.tailwindcss.com) and Google Fonts, the runtime spawns the logged-in local agent CLI (envFor passes through process.env), and the preview iframe uses sandbox="allow-scripts allow-same-origin".
5Second-Pass Verification
- [discrepancy] 规范↔示例：字体 — 正文指定「Playfair Display + IBM Plex Serif + JetBrains Mono」；示例 `--serif-body` 实为 `'Iowan Old Style', 'Charter', Georgia, serif`（无 IBM Plex Serif），等宽是 `'IBM Plex Mono'`（不是 JetBrains Mono），且全文件未引 Google Fonts——Playfair Display 在未装该字体的机器上会回退。
- [ok] 规范↔示例：编号 section 数 — 正文要求 6 个编号 section，示例命中 cell-1..cell-6 与编号 01–06（「01 · SHIP FAST」等）。
- [ok] pull-quote 与 dateline — 示例以 `<div class="quote">` 承载每段 pull-quote，以 `.top-rule`（`01 · AI ENTHUSIAST` / `17 · APR · 2026`）承载 dateline 的刊名与日期。
- [ok] 删除线/斜体 accent — 示例 `h1.headline .strike { text-decoration: line-through; … }` 与 `h1.headline .accent { font-style: italic; … }` 落地正文的标题修辞要求。
- [ok] 脚本/外链普查 — example.html 无 <script>、无 http(s) 命中——零外链零脚本，离线可开。
- [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html；无 scripts/、无 references/、无数据文件、无包管理器清单。
- [ok] 可执行代码普查 — example.html 内 <script> 计数 = 0，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
- [ok] 外链端点普查 — 目录内（含 example.html）零 http(s) 命中，产物离线自持。
6Verdict & Scenarios
Best for: Brand manifesto long images, social media vertical posters, 'newspaper-style' header images for newsletters/public accounts; ideal when a strong editorial aesthetic is required.
Not for: Pages requiring data charts or interactivity; brand collaterals requiring strict font weight/typeface consistency (template does not load fonts); short-copy scenarios (newspaper style relies on sufficient body copy volume to support two columns and 6 sections).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload magazine-poster.tar.gz
sha256:
Option B · Copy Guide for Agentcccc07fdf20a7e6a…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.