Design & Motion · nexu-io/html-anything

web-proto-editorial

Name: web-proto-editorial
Author: nexu-io/html-anything

Editorial-minimalist: Warm monochrome canvas + serif display + grotesque body

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

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE 文件；GitHub API license.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

This skill is not an executable program, but rather a "template" for html-anything: a directory (SKILL.md + example.html[/example.md]) scanned and read from disk at runtime by loader.ts—adding a new template equals adding a new directory, requiring no modifications to TypeScript.

next/src/lib/templates/loader.ts

Adding a template = adding a folder. No TS code change required; the API

SKILLS_DIR is fixed at src/lib/templates/skills relative to the app cwd; listSkills() iterates through first-level subdirectories, filters them via isValidBundledId, and reads SKILL.md directory by directory to parse frontmatter, meaning the "selector metadata" and "generation prompt body" originate from the exact same file.

The frontmatter provides metadata for the selector/API (zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags), which fmToMeta() maps into SkillMeta; the body following the frontmatter constitutes the actual specification given to the model.

next/src/lib/templates/loader.ts

zhName: fm.zh_name ?? fm.name ?? id,

The id is derived from the directory name; example metadata (example_id/name/format/tagline/desc/source_url) only produces SkillExampleMeta when the directory includes example.md/html, and body is deliberately excluded from the list API (code comment: Body is excluded so we can return the entire registry in one cheap fetch).

During generation, this template body is treated as the prompt body: /api/convert uses assemblePrompt() to concatenate "global design directives + this template body + user content" into a single prompt, which is handed to the host's local agent CLI, and HTML is captured via stdout streaming.

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

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

The same route also contains editFromHtml/editFromContent "minimal difference editing" branches; on this pipeline, the template body remains purely a string without evaluation or execution.

On top of the template body sits a block of global prepended directives (SHARED_DESIGN_DIRECTIVES), uniformly applying technical and content disciplines before every template—the external CDN/font links commonly found in example HTML originate here (injected by the host shell, not requested by the template itself).

next/src/lib/templates/shared.ts

通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。

The template body only governs style/layout/components and does not repeat these rigid requirements; grading evaluates only the template's own directory, and this endpoint behavior belongs to the host shell, documented under security.reason for self-verification.

Artifacts are returned as stdout text: global directives explicitly forbid the agent from touching the file system, leaving disk writing to the frontend—thus, the template directory possesses neither scripts nor disk-writing capabilities.

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

The original prompt specifically demands: "Do not write HTML to any .html files... The frontend directly captures your stdout text, and disk writing is handled by the frontend"; artifacts are ultimately written to task records and exported by the frontend.

example.html is a pre-rendered example bundled with the package: /api/templates/<id>/preview returns it verbatim as text/html to an iframe (inline selector preview), while /api/templates/<id>/example returns example.md + example.html together.

next/src/app/api/templates/[id]/preview/route.ts

return new Response(skill.exampleHtml, {

The example serves only for preview/documentation and does not participate in the generation prompt (generation uses only the SKILL.md body), so its external links do not affect the capability boundaries of the template itself.

The body defines editorial-minimalist via four key pillars: a warm monochrome canvas, a three-font-family division (serif display + grotesque body + mono meta), 1px hairline borders paired with ultra-soft chips, and macro-whitespace combined with ambient micro-motion.

next/src/lib/templates/skills/web-proto-editorial/SKILL.md

- Serif display + grotesque body + mono meta

The three complementary guidelines are "- Warm monochrome canvas", "- 1px hairline borders, ultra-soft chips", and "- Macro-whitespace, ambient micro-motion"—the "magazine feel" is broken down into three actionable items: typography, borders, and rhythm.

The example defines font family roles as CSS variables: Instrument Serif for display, Inter Tight for sans, and JetBrains Mono for mono.

next/src/lib/templates/skills/web-proto-editorial/example.html

--display: 'Instrument Serif', 'Newsreader', 'Lyon Text', Georgia, serif;

Within the same variable block, --sans/--mono each possess preferred + fallback font stacks, ensuring a graceful degradation if Google Fonts fails to load.

"ambient micro-motion" is powered by IntersectionObserver, with the code comments explicitly rejecting scroll listeners: // Intersection-observer reveal — never window scroll listeners.

next/src/lib/templates/skills/web-proto-editorial/example.html

// Intersection-observer reveal — never window scroll listeners.

This is a concrete engineering trade-off: entrance reveals trigger once and unobserve, avoiding scroll callback jitter—echoing the body's principle of "micro-motion that does not distract."

"Ultra-soft chips" are implemented as four light-background/dark-text semantic color pairs (pale red/blue/green/yellow), all styled with 1px hairline borders rather than shadows.

next/src/lib/templates/skills/web-proto-editorial/example.html

--pale-red-bg: #FDEBEC; --pale-red-fg: #9F2F2D;

This forms three distinct "boundary" strategies within the same series alongside brutalist's 1px solid lines and soft's dual-layer bevels.

On the CLI side, there is a direct keyword matching channel: skills-matcher.ts directly maps keywords in user content to this template id; a hit assigns confidence = hits × 2 + 3, and reaching the threshold of 3 triggers local rules without asking the model to select a template.

cli/src/skills-matcher.ts

[["editorial", "编辑", "杂志风", "serif", "排版"], "web-proto-editorial"],

Keywords like editorial / editorial style / magazine style / serif / typography map directly to this template; it shares the design scenario signal table with brutalist and soft.

Threshold constants used for CLI fallback matching: content length must exceed 60 characters to enable AI summary matching; the strong signal threshold is 3.

cli/src/skills-matcher.ts

const MIN_CONTENT_LENGTH_FOR_AI = 60;

Additionally, SCENARIO_SIGNALS weights keywords according to the template scenario, and fallbackMatch scores using tags/zhName/description; only when both layers fail is the agent invoked for summary matching.

The host shell renders examples/artifacts using an iframe with sandbox="allow-scripts allow-same-origin" (allowing scripts and same-origin access)—this is a product shell trade-off, noted under risks, and does not factor into the grading of this skill.

next/src/components/template-picker.tsx

sandbox="allow-scripts allow-same-origin"

Shared across preview-pane.tsx and deck-viewer.tsx; inline JS in example HTML executes only during browser previews, and the skill itself executes no scripts.

2Core Capabilities

01Warm monochrome canvas (--canvas #FBFBFA)

02Three font families: serif display + grotesque body + mono meta

031px hairline borders (replacing drop shadows)

04Ultra-soft semantic chips (four muted light backgrounds)

05Macro-whitespace rhythm

06Ambient entrance micro-motion (IntersectionObserver reveal)

3External Dependencies

Kind	Dependency / Endpoint
network	Google Fonts（Instrument Serif / Inter Tight / JetBrains Mono）
network	Google Fonts 静态资源域（preconnect）

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, with no script execution or external impact

Audit Notes: Grading target = this skill directory (next/src/lib/templates/skills/web-proto-editorial/), verified file by file: zero scripts, zero credential access, zero disk writing; endpoints appearing within the directory are strictly limited to Google Fonts (Instrument Serif / Inter Tight / JetBrains Mono) and Google Fonts static asset domains (preconnect), all located within the "artifact example" example.html; SKILL.md body only dictates layout/style/font family names and specifies no runtime external interfaces, making it a pure directive template = green. Host-side note (not factored into grading): the html-anything product shell stitches the body into prompts via assemblePrompt() and spawns a local agent CLI, injecting cdn.tailwindcss.com + Google Fonts requirements (next/src/lib/templates/shared.ts), and the preview iframe uses sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).

5Second-Pass Verification

[ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
[ok] 外部端点仅字体 — example.html 仅 fonts.googleapis.com css2 与 fonts.gstatic.com preconnect；SKILL.md 正文无 URL。
[ok] 微动效实现方式 — 示例内联脚本用 IntersectionObserver(threshold 0.08) 一次性 reveal + unobserve，注释自述不用滚动监听。
[ok] hairline / chip 是否按正文实现 — --hairline #EAEAEA 贯穿边框；.chip--green/blue/red/yellow 四组浅底深字，与正文「1px hairline borders, 极柔和 chip」对应。
[unlocatable] 无 JS 时 reveal 是否兜底 — 示例的 .reveal 初始态与 is-in 类由脚本切换，styles 中未见 no-JS 或 prefers-reduced-motion 的兜底规则；无法从源码确证降级行为，未在正文作断言。
[ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["editorial", "编辑", "杂志风", "serif", "排版"], "web-proto-editorial"] 行。
[ok] 判级 green 自证 — 目录零脚本文件（示例内联 reveal 属产物示例）、零凭证、零写盘；正文无运行时接口 → green。
[ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文。

6Verdict & Scenarios

Actionable "magazine feel": font family allocation + 1px borders + macro-whitespace ensure the model does not have to guess what editorial means

Restrained motion with sound engineering rationale: IntersectionObserver one-off reveal with comments explicitly forbidding scroll listeners

Graceful degradation: each font family variable includes a robust fallback stack (Georgia / system-ui / ui-monospace)

Semantic chips use light backgrounds + dark text instead of high saturation, reducing reading fatigue on long-form pages

Best for: Suitable for long-form/whitepaper landing pages, technical writing product sites, and brand pages requiring a "quiet, credible" tone; also serves well as the refined, literary counterpart among the three style prototypes.

Not for: Not suitable for high-impact marketing campaign pages or data-intensive dashboards; not suitable for scenarios requiring heavy animation or 3D effects (this template is deliberately restrained).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload web-proto-editorial.tar.gz

sha256: cd20ceb19bfbeb7f…

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.