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

digital-eguide

Name: digital-eguide
Author: nexu-io/html-anything

Two-page spread digital guide featuring a cover + lesson page + pull-quote + step list.

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 follows the pattern 'one directory = one template': the frontmatter of SKILL.md is used for display in the selector, while the body serves as the prompt sent to the model; adding a template means simply adding a directory without modifying TypeScript.

next/src/lib/templates/loader.ts

routes rescan disk and the client refetches `/api/templates`.

The header comments in the same file define the directory convention: SKILL.md (frontmatter + prompt body) / example.md (optional sample input) / example.html (optional preview). This skill directory strictly follows this structure.

The actual prompt sent to the model = platform shared design directives (SHARED_DESIGN_DIRECTIVES) + the body of SKILL.md from this skill + user content, assembled into a single prompt via 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 solely responsible for layout, style, and component library; output constraints (single-file HTML, mandatory use of real user data, content-driven quantity) come from the shared directives, so template authors do not need to redeclare them.

The final output bypasses the filesystem: shared directives strictly forbid file tools such as Write, Edit, and Bash, requiring the model to stream the entire HTML directly as the response body (stdout is captured and written to disk by the front end).

next/src/lib/templates/shared.ts

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

This is the architectural basis of the skill's 'zero disk-write' nature: it is the host front end that writes the file, not the skill; this directory contains no scripts.

The deliverable is not a standard webpage, but an 'open book': a two-page side-by-side horizontal spread with a cover on the left and an interior page on the right, positioned visually as a lead magnet style.

next/src/lib/templates/skills/digital-eguide/SKILL.md

- 两页 side-by-side 横向, 像翻开的书

This is strictly enforced by the layout rules: Page 1 is the cover (display title + author + 'What's inside' stats + TOC teaser), and Page 2 is the interior page (lesson body + pull-quote + step list). These two pages constitute the entire delivery surface and do not expand with longer content.

The open-book effect is crafted via two CSS properties: a flex container with a horizontal layout and a 36px gap, each page being 540px wide and at least 740px high, each slightly counter-rotated by ±0.6deg.

next/src/lib/templates/skills/digital-eguide/example.html

.page.left { transform: rotate(-0.6deg); }

In the same file, .page.right uses rotate(0.6deg) and switches to the --paper-2 background color, creating paper depth with light and dark tones; .page also uses a soft shadow of 0 30px 60px to evoke the look of a book lying flat on a desk.

Pages are marked with semantic anchors in the sample: the left page is article.page.left.cover (data-od-id="cover"), and the right page is article.page.right.spread (data-od-id="spread"), making subsequent block targeting easier.

next/src/lib/templates/skills/digital-eguide/example.html

<article class="page right spread" data-od-id="spread">

data-od-id is a block-naming convention (od = open design) across this evaluation batch, used only in some sample files among the 81 template directories; there is no logic consuming it in the repository codebase (grep yields no hits), serving merely as readability markup for the final output.

The interior page typography utilizes a triad of 'drop cap + numbered steps + pull-quote opening with quotation marks': .columns p:first-letter creates the drop cap, while .steps .row features a 28px numbered column with dashed dividers.

next/src/lib/templates/skills/digital-eguide/example.html

.steps .row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--rule); }

This corresponds to the 'lesson body + pull-quote + step list' in SKILL.md; the pull-quote block uses a dedicated data-od-id="pullquote" and opens with a 56px quotation mark glyph (.pullquote .open).

The cover creates a 'tutorial product feel' using a stat row + TOC teaser: 3 stat counters (16 / 38 / 1) + 6 lines of table of contents entries (title + dotted leader line + page number).

next/src/lib/templates/skills/digital-eguide/example.html

<h2 class="inside">What's <em>inside.</em></h2>

Stats use 36px serif numbers via .stat .num, and TOC entries use dotted leader lines via .toc .item—both implemented purely in CSS without images or scripts.

The server-side /api/convert performs only three tasks: reads the skill from disk by templateId, assembles the prompt, and spawns the local agent CLI to forward the output via SSE stream.

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

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

The same file executes `const skill = loadSkill(templateId);` (returns 400 if the template does not exist) before passing it to invokeAgent; the skill directory itself creates no processes and makes no network calls.

2Core Capabilities

01Two-page spread digital guide: left cover (title/author/stats/TOC) + right interior page (body/quote/steps)

02Open-book appearance: horizontal two-page spread + subtle counter-rotation + paper tone contrast + soft shadows

03Editorial-grade interior typography: drop cap opening, numbered step rows, dashed dividers

04Large pull-quote block to highlight key takeaways and attributions

05Table of contents entries with dotted leader lines (title + page number)

06Soft beige paper palette (--paper: #faf3ea / --paper-2: #f4ecdf + brick red accent)

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 directives and rule text, without script execution or external side effects

Audit Notes: Evaluation target = the skill directory itself (SKILL.md + example.html/example.md, containing zero scripts, zero credential access, zero disk-write directives, and no network call code). Under the Batch 4 final criteria, html-anything templates are uniformly evaluated as green: SKILL.md does not specify any runtime service backend/API, nor does it send user assets to an external generation backend (no orange criteria); it contains no reverse engineering, spoofing, or backend bypass (no red criteria). The only external endpoints appearing in the directory are external links in the product sample (preconnect and stylesheet links for Google Fonts in example.html (fonts.googleapis.com / fonts.gstatic.com)), which are classified as 'product sample assets' and do not impact grading under the criteria, listed here merely for full self-verification. 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 require the output to load external assets via CDN—these are platform behaviors mentioned solely for completeness.

5Second-Pass Verification

[ok] 「两页跨页」且不随内容扩页 — 样例恰 2 个 article.page；SKILL.md【意图】明写「一封面一内页跨页排列」。
[ok] 「像翻开的书」的视觉手法 — flex 横排 + .page.left/.page.right 反向 0.6deg 旋转 + 两页纸面色差 + 30px/60px 柔影。
[ok] 「pull-quote + 步骤列表」 — .pullquote（含 56px 引号字形与署名行）与 .steps .row（4 条编号步骤）均在样例内。
[ok] 字体依赖 Google Fonts — 样例 <link> 引入 Cormorant Garamond / DM Serif Text / IBM Plex Mono 三族；离线打开时回落到 Iowan Old Style/Georgia，布局不崩。
[ok] data-od-id 的作用 — 样例有 5 处 data-od-id（cover/toc/spread/pullquote…），但 repo 内 TS/JS 对 data-od-id 零引用（grep 无命中）→ 仅成稿语义标记，不是运行时钩子。
[ok] 无外部图片 — 全文无 <img> 与外链图；封面的几何点/线均为 CSS 绘制。

6Verdict & Scenarios

Distinctive form with a clear purpose: the two-page spread mirrors an open digital book preview, feeling more like a downloadable lead magnet than a generic slide deck.

Print-level details replicated purely in CSS (drop cap, dotted TOC leader, subtle page tilt, soft shadow) with zero external assets and zero scripts.

A triad of font families (display / body / monospace label) delivers a complete editorial aesthetic in just two pages.

Graceful degradation on narrow screens: stacks using 92vw / max-width:540px, preventing horizontal clipping on mobile devices.

Best for: Ideal for packaging short articles or checklists into a downloadable 'digital guide/style handbook' preview (lead magnet); well-suited for creator newsletter perks, course syllabus previews, brand lookbook opening spreads, or any scenario requiring a polished two-page layout.

Not for: Not suitable for multi-chapter long tutorials (strictly constrained to two pages); not suitable for data-intensive reports or documents requiring charts; not suitable for slide presentations requiring horizontal landscape projection (canvas is vertical pages); not suitable for long bilingual Chinese/English text (serif body font is primarily tuned for Latin characters).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload digital-eguide.tar.gz

sha256: 810081d8875f1560…

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.