Content & Media Creation · nexu-io/html-anything

email-marketing

Name: email-marketing
Author: nexu-io/html-anything

Product launch email, featuring masthead, hero, CTA, specs table, and table-fallback

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE = Apache License 2.0；GitHub API license.spdx_id = Apache-2.0；next/package.json 亦声明 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

This skill is not an executable program, but rather "one directory = one template": the frontmatter of SKILL.md is used for selector display, and the body serves as the prompt sent to the model; adding a template simply 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 specify the directory convention: SKILL.md (frontmatter + prompt body) / example.md (optional input example) / example.html (optional preview). This skill directory strictly follows this structure.

The actual prompt dispatched = platform shared design directives (SHARED_DESIGN_DIRECTIVES) + the SKILL.md body of this skill + user content, concatenated 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" segment; output discipline (single-file HTML, mandatory use of real user data, content-driven quantity) originates from the shared directives, sparing template authors from redundant declarations.

The finalized output bypasses the file system: shared directives explicitly prohibit file tools such as Write/Edit/Bash, requiring the model to stream the entire HTML directly as the response body (stdout is captured and persisted to disk by the front end).

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。

This is the source of the "skill itself performs zero disk writes" mechanism: disk writing is performed by the host front end, not the skill; there are no scripts whatsoever in this directory.

The goal is "HTML capable of rendering in email clients": SKILL.md stipulates a 600px single column, <table role='presentation'> fallback layout, and colors specified via inline styles rather than classes.

next/src/lib/templates/skills/email-marketing/SKILL.md

- 使用 `<table role='presentation'>` 做布局兜底

These three guidelines are standard practices for email compatibility (table layout + inline styles to bypass email clients stripping <style>/classes). Note that the example does not fully comply (see verification.second_pass): it uses div + <style> + grid, showing that "the specification resides in the prompt, while the example is an early version".

The platform-side export pipeline perfectly explains "why inline styles are required": when exporting to WeChat/Email, the front end uses juice to inline the CSS from <style> into each element, as target clients only support inline styles.

next/src/lib/export/wechat.ts

Take a full HTML document, extract <body> content, inline all CSS via juice,

The same comment section also notes that Tailwind via CDN is invisible to juice—thus, the rule "use inline styles for colors" is not pedantry, but the key to preserving styling after juice performs inlining on the output.

The email structure fully follows the product launch email paradigm: Masthead (wordmark + navigation) → Hero image block → Headline lockup (including slanted accent) → Body copy → Primary CTA button → Specs grid → Footer (social + unsubscribe).

next/src/lib/templates/skills/email-marketing/example.html

<div class="frame" data-od-id="email">

The example labels each block with data-od-id (email/masthead/hero/headline/specs/footer), corresponding one-to-one with the layout checklist in SKILL.md to facilitate locating "which block to edit".

The Hero is a product illustration drawn via inline SVG (a pair of running shoes) without relying on external image links—consisting of multiple paths + two linearGradients for coloring.

next/src/lib/templates/skills/email-marketing/example.html

<svg class="shoe" viewBox="0 0 600 280" aria-hidden="true">

Corresponds to the "Hero block (SVG placeholder)" in SKILL.md and the shared directive "do not reference any external image URLs"; email clients commonly block external images, making inline SVG a viable solution (rasterized upon static screenshot export).

The visual anchor of the brand tone is the "slanted element": the accent square in the wordmark uses transform: skew(-12deg), and emphasized words in headlines use skew(-8deg) italics, creating a dynamic visual vocabulary suited for sportswear brands.

next/src/lib/templates/skills/email-marketing/example.html

h1.lockup .axis { color: var(--accent); display: inline-block; transform: skew(-8deg); }

The example brand is the fictional SPORT TEST (--accent:#d8482b orange-red + paper color #f4efe7); all visual presentation is driven by 6 CSS variables combined with skews and font weights.

The conversion loop closes in the footer: Unsubscribe + View in browser compliance links alongside a copyright line.

next/src/lib/templates/skills/email-marketing/example.html

<div><a href="#">Unsubscribe</a> · <a href="#">View in browser</a></div>

Corresponds to the "Footer (social + unsubscribe)" in SKILL.md; the example uses a placeholder #, which must be replaced with an active unsubscribe URL in production deployment.

The server-side /api/convert performs only three tasks: read the skill from disk according to templateId, assemble the prompt, spawn the local agent CLI, and forward the streamed output via SSE.

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

In the same file, it first executes `const skill = loadSkill(templateId);` (returns 400 if the template does not exist) and then passes it to invokeAgent; the skill directory itself produces no processes and makes no network calls.

2Core Capabilities

01Branded product launch email single page: masthead / hero / headline lockup / body copy / CTA / specs grid / footer

02Inline SVG hero block, bypassing email client blocking of external images

03Slanted accent design vocabulary (wordmark accent square and headline emphasis words)

04Specs grid presenting product parameters (large numbers + monospace small labels)

05Primary CTA button (dark background with light text + arrow + uppercase wide letter spacing)

06Compliance footer (Unsubscribe / View in browser / copyright)

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt instructions and rule text, without script execution or external impact

Audit Notes: . Evaluation target = skill directory itself (SKILL.md + example.html/example.md; this directory contains zero scripts, zero credential access, zero disk-writing instructions, and no network invocation code). Under Batch 4 final criteria, html-anything templates are uniformly rated Green: the entire SKILL.md mentions no runtime backend services/APIs and does not send user assets to external generation backends (no Orange triggers); no reverse engineering, spoofing, or bypassing of backends (no Red triggers). The only endpoints present in the directory are artifact example external links (None: example.html contains no external links, font links, CDNs, or image URLs; fonts fall back to local/system stacks like 'Inter'/'Anton'/'Bebas Neue'), which count as "artifact examples" and are exempt from rating under the criteria, listed here only for self-attestation. Host-side considerations: 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 instruct outputs to reference CDNs—these are platform behaviors noted for context only.

5Second-Pass Verification

[discrepancy] 「600px 单栏」 — 样例 .frame { max-width: 680px; }，为 680px（frontmatter aspect_hint 也写「600 邮件宽」）；单栏成立，宽度不符。
[discrepancy] 「使用 <table role='presentation'> 做布局兜底」 — 样例全文无 <table>、无 role="presentation"，改用 <div class="frame"> + grid/flex；邮件客户端（Outlook）对 grid 支持差，规范与样例的兼容性结论相反。
[discrepancy] 「颜色用 inline style (不要依赖 class)」 — 样例把配色写在 <style> 的 :root 变量与 class 里，仅个别元素用 inline style；与规范相悖（宿主可用 juice 内联补救，但那是导出期行为）。
[discrepancy] 「Specifications grid (3 列)」 — 样例 .specs-grid 为 repeat(2, 1fr)，且实际 4 个 .spec（2 列 × 2 行）。
[discrepancy] 「Masthead (wordmark 居中)」 — 样例 masthead 为 display:flex; justify-content: space-between，左侧 wordmark + 右侧 SHOP/JOURNAL/MEMBERS 导航，非居中。
[ok] Hero 为 SVG 占位而非外链图 — <svg class="shoe" viewBox="0 0 600 280"> 含两条 linearGradient 与多段 path，无 <img>。
[ok] 目录内零脚本/零端点 — 无 <script>、无 CDN、无字体外链；字体族名属本地/系统栈。

6Verdict & Scenarios

Ready-to-deliver structure tailored for email scenarios: masthead → hero → headline → body → CTA → specs → unsubscribe footer, deliverable in a single generation pass.

Zero visual assets needed: hero drawn via inline SVG, emphasis created via skew and font weight, avoiding external image blocking by email clients.

Backed by platform-grade post-processing: the export pipeline uses juice to inline <style>, compensating for the example not utilizing inline styles.

Comprehensive compliance elements: unsubscribe, browser viewing, and copyright lines are all integrated into the footer.

Best for: Suitable for single-page deliverables for new product launches, feature releases, and event marketing emails; suitable for newsletter templates that require "no external images and ability to render across email clients"; suitable as a foundation for email service provider templates (table conversion needed).

Not for: Not suitable for multi-section newsletter layouts (single column, single CTA, limited information capacity); not suitable for e-commerce emails with galleries/multiple products (no loop list component, no external image strategy); not suitable for scenarios requiring interactivity (forms, animations); not suitable for direct production use as compliance-ready emails without manually replacing the unsubscribe link.

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload email-marketing.tar.gz

sha256: ed93a7856ba23d50…

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.