Design & Motion · nexu-io/html-anything
poster-hero
Vertical poster / Moments sharing image, strong visual impact
L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-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 a plain text prompt template: the host parses the YAML frontmatter of SKILL.md via regex and loads the main body as the prompt body.
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
Repository's self-description of directory conventions: 'SKILL.md — frontmatter (id, scenario, tags, …) + prompt body', and 'Adding a template = adding a folder. No TS code change required'—templates are registered via directory conventions; searching the entire TS/TSX codebase yields no hardcoded references to "poster-hero", meaning this template is not subjected to any special-case handling in code.
The template body is not executed in isolation; rather, it is concatenated into the "template segment" of the final prompt: shared design directives + this template's body + user content.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
assemblePrompt in shared.ts describes itself as: 'Wrap a per-template instruction body with the shared design directives and the user content tail.'; the request first retrieves this directory's body via const skill = loadSkill(templateId); and then assembles it.
The global "content-driven quantity" rule overrides any numbers specified in the template: the template only defines layout/style/palette/component library, not output length.
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
This rule is marked as "highest priority, overriding any numbers in the template", and explicitly specifies that numbers like "6-10 slides" in deck templates are "invariably treated as reference lower bounds under short examples". Thus, this template defines available layouts and constraints, not an upper limit on pages.
The artifact format is strictly enforced by global constraints: single-file HTML, pure HTML without fences, the first character must be <, and writing to files is strictly forbidden (stdout is captured by the frontend).
next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
The same section also explicitly states 'Prohibited from using Write / Edit / MultiEdit / Bash / Create / any file system tools'—persisting files to disk is handled by the host frontend, and no file-writing actions occur on the template side.
Frontmatter metadata drives the selector UI presentation (Chinese name, English name, emoji, description, category, scenario, aspect ratio, tags, and example metadata).
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
Metadata for this template: category=poster, scenario=marketing, aspect_hint=1080×1920 vertical (without featured, placing it behind the recommended bucket in the selector). The selector groups items by category/scenario and sorts by featured, all driven by frontmatter without special-case code logic.
Bundled example assets are exposed to the frontend via two read-only APIs: example.html is returned as-is into an iframe, and example.md serves as the input content for the "Preview" button.
next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
The response header of example.html is Content-Type: text/html; charset=utf-8; another route delivers the sample text to the client via content: skill.exampleMd ?? "". This directory contains: example.md (329 bytes) and example.html (5743 bytes).
Execution chain (host behavior, not this template's code): The host spawns a locally logged-in agent CLI, pipes the assembled prompt via stdin, and streams the HTML back from stdout.
next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
The child process runs with cwd=process.cwd() (cwd: opts.cwd ?? process.cwd(),) and stdio completely piped; the prompt is passed via stdin/--message rather than shell string interpolation (not interpolated into a shell command).
This template enforces the strictest canvas dimensions among the 9: width and height are directly declared using Tailwind arbitrary value classes (w-[1080px] h-[1920px]), making the output immediately exportable as a social media vertical image.
next/src/lib/templates/skills/poster-hero/SKILL.md
w-[1080px] h-[1920px] mx-auto
In conjunction with the shared directive requiring 'single-file HTML, double-clickable to open', the image generation path is "Generate HTML → Browser screenshot/export to PNG".
The layout is strictly partitioned into "top / middle / bottom / bottom-right" zones with fixed element types for each zone, representing a typical "layout-scripted" template where the model mainly fills in copywriting and color schemes.
next/src/lib/templates/skills/poster-hero/SKILL.md
- 上部 30% 留白 + 一个大 emoji 或抽象几何图形。
Unlike structural templates like mobile-app, this template explicitly specifies font sizes and weights (text-8xl, font-black), categorizing it as a "semi-stylized" template.
QR code and branding areas use SVG placeholders instead of external image links to ensure offline usability of the artifact; example.md (329 bytes) provides sample copy for a "Product Launch" scenario.
next/src/lib/templates/skills/poster-hero/SKILL.md
- 底部右下角放品牌 / 二维码 (用 SVG 占位)。
The example asset pair is example.md + example.html, allowing users to see the complete side-by-side comparison of "input copy → finished poster" in the example gallery.
2Core Capabilities
01Fixed vertical canvas of 1080×1920, directly aligned with Moments/poster dimensions
02Rigid visual zoning: upper whitespace reserved for the primary visual symbol
03Center headline dominates visual focus (text-8xl / font-black)
04Bottom-right corner branding + QR code slot (SVG placeholder)
05All decorative elements rendered on the fly via SVG (circles/triangles/waves/noise)
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
| network | 随包示例 example.html 的外链（产物示例） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Declare allowed domains and key scope
For Administrators
Least privilege keys, retain request logs
Evidence & Triggers (File Paths & Excerpts)
- 网络端点: Declared external network access: No network request code exists within the directory; the bundled example.html references https://cdn.tailwindcss.com in <head> (an external link in the example artifact,
Audit Notes: . Rating scope: Evaluates only this skill directory (SKILL.md + example.html/example.md); the host shell and external links in artifacts are not part of the rating. Zero scripts, zero credential reads, zero disk write directives, and no runtime external links required by SKILL.md (SKILL.md contains no occurrences of http/CDN/fetch/API). The only endpoint actually appearing in the directory is a single artifact external link: example.html references cdn.tailwindcss.com in its <head> (a bundled static example loaded by the browser during preview); "$ pnpm dlx html-anything" appearing in the text of example.html is merely sample poster command copy, not an executed instruction (there are no script files in the directory). Two notes provided for clarification without altering the rating: ① The host shell (loader.ts → assemblePrompt → agents/invoke.ts spawning the local CLI; claude arguments include --permission-mode bypassPermissions, and envFor passes all environment variables via {...process.env}) constitutes host behavior and has been documented in verdict.risks; ② The shared design directives injected by the host require the artifact to reference Tailwind Play / Google Fonts in <head> (constituting runtime external links for the artifact).
5Second-Pass Verification
- [ok] skill 目录资产面（脚本 / references / 数据 / 模板） — 目录实为 3 个文件：SKILL.md 与 example.html、example.md；无 scripts/、无 references 目录、无任何可执行文件（.sh/.py/.js/.mjs/.ts 零命中）。
- [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描（api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.）：仅命中 example.html 里作为示例文案出现的 "$ pnpm dlx html-anything"（展示文本，非可执行指令）；SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描，仅命中 font-semibold / font-black 这类字重类名，无端点。
- [ok] 官方描述 vs 实际能力（有无夸大） — frontmatter description（竖版海报 / 朋友圈分享图, 强视觉冲击）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目（Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI）逐条回到 shared.ts 与 argv.ts 原文取证；本模板另有 example.html 的 cdn.tailwindcss.com 外链，已在该 example.html 原文中定位。
- [ok] 宿主执行链（供 security.reason / verdict.risks 使用，不参与判级） — prompt 经 stdin 送入被 spawn 的本机 CLI（invoke.ts），HTML 从 stdout 分流捕获；claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env；预览 iframe sandbox="allow-scripts allow-same-origin"（template-picker.tsx:544 / preview-pane.tsx:297）。
- [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 一致）；skill.path=next/src/lib/templates/skills/poster-hero 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] example.html 的 Tailwind CDN 外链是否构成运行时外发 — 该 <script src="https://cdn.tailwindcss.com"> 位于随包示例产物的 <head>，只在选择器 hover / 预览 iframe 中由浏览器加载，用于渲染这份静态示例本身；skill 目录内无脚本、无网络调用代码，SKILL.md 未要求产物引 CDN。
- [ok] "用 SVG 占位"是否需运行时生成 — 原文 "- 底部右下角放品牌 / 二维码 (用 SVG 占位)" 指在产物里画一个 SVG 占位图形，由 agent 直接写入 HTML；目录内无二维码生成脚本、无外部接口。
6Verdict & Scenarios
Best for: Suitable for vertical posters and Moments sharing images for marketing launches and event announcements: one-line value proposition + 3-5 selling points + QR code/branding slot, aiming for strong "notice-at-first-glance" impact.
Not for: Not suitable for high-end brand tones that require restrained whitespace (the template explicitly demands "bold colors / strong impact"); not suitable for finely typeset long-form articles or multi-page materials (doc/deck templates should be selected instead).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload poster-hero.tar.gz
sha256:
Option B · Copy Guide for Agent8eac8d0976c45e65…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.