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

article-sketchnote-editorial

Name: article-sketchnote-editorial
Author: nexu-io/html-anything

Casts a concept into a magazine-style feature archive — real problem → failure → turning point → epiphany → naming, using 6 layout archetypes + a 4-font-family contrast system + investigative dossier details.

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

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE：Apache License Version 2.0, January 2004；GitHub API 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

The template itself contains no executable code: the loader reads frontmatter and body text from src/lib/templates/skills/<id>/SKILL.md, returning the body along with example content as LoadedSkill.

next/src/lib/templates/loader.ts

const raw = safeRead(path.join(dir, "SKILL.md"));

What is happening here: SKILL.md is the sole source of behavior — frontmatter is used for UI selector rendering (zh_name, emoji, aspect_hint, tags, example_*, etc.), and the raw body acts entirely as the prompt. The loader performs no semantic validation, dispatching whatever is written in the template.

Before dispatch, the host deterministically assembles the prompt: the template body is sandwiched between SHARED_DESIGN_DIRECTIVES and the [Input Format] / [User Content] blocks.

next/src/lib/templates/shared.ts

Wrap a per-template instruction body with the shared design directives and

What is happening here: The template defines only 'what this single deliverable looks like' (layout, rhythm, components), while shared directives enforce cross-template hard constraints — single-file HTML, prohibition of file tools, loading Tailwind and Google Fonts via CDN, factual integrity, and CJK-Latin spacing (Pangu spacing).

Shared directives frame hard constraints as explicit prohibitions for the agent and enforce content-driven quantity (numbers in the template serve only as reference minimums).

next/src/lib/templates/shared.ts

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

Later in the same file, another rule states: the number of output slides / frames / cards / sections is entirely dictated by the actual length and information structure of the [User Content]. This explains why this template class does not break when content grows: each section of content receives at least one card/section, with the template merely providing a layout pool.

Execution is handled by the coding agent CLI already installed and authenticated on the user's local machine: the host spawns a child process, passes the prompt to it, and streams HTML from stdout.

next/src/lib/agents/invoke.ts

import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";

What is happening here: The template skill provides only prompts; capabilities (including code generation and tool execution) originate from the existing permissions of the host CLI. The skill directory contains no script entry points, so tier grading evaluates only in-directory assets (host actions are not graded).

/api/convert is the execution path of the template: it bundles skill.body and user content into a prompt and passes it to invokeAgent.

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

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

Edit mode follows buildEditPrompt (minimal-diff editing, prohibiting file tools and requiring direct streaming of the complete HTML). Consequently, output artifacts maintain a stable format: single-file HTML, inline CSS/SVG, and external links restricted to fonts and charting libraries explicitly requested by specific templates.

The core implementation relies on a dual-lock system of 'narrative arc + layout archetypes': six axioms constrain the narrative (real problem first, failure required, epiphany before naming, etc.), and six layout classes govern pacing — any violation triggers a redo.