Design & Motion · nexu-io/html-anything

frame-data-chart-nyt

Name: frame-data-chart-nyt
Author: nexu-io/html-anything

NYT-newsroom typography + staggered reveal animation + editorial-grade charts (line/bar/range band)

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

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

This skill is not an executable program, but a prompt injected into the local coding-agent CLI: the host takes the body of SKILL.md, prepends site-wide shared design instructions, appends user content, concatenates them into a single prompt for the logged-in agent, and retrieves the agent's stdout as HTML.

next/src/lib/templates/shared.ts

【输入格式】: ${opts.format} 【用户内容】: ${opts.content}

Assembly template = shared instructions → skill body → input format → user content; the web endpoint /api/convert follows the same function: prompt = assemblePrompt({ body: skill.body, content, format });

The shared instruction layer (which does not belong to any single skill but sits atop every template) enforces the output as a 'self-contained single-file HTML', explicitly prohibiting the agent from using filesystem tools like Write/Edit/Bash, and streams HTML directly into the conversation body.

next/src/lib/templates/shared.ts

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

This is the source of the capability boundary for this batch of skills: deliverables are purely text, while saving to disk and rendering are handled by the host frontend; this prohibition is a soft prompt constraint, not hard sandbox isolation.

Beyond SKILL.md, there is a 'content-driven quantity' override rule: any page, frame, or card counts specified in the template are treated as reference minimums, with the actual quantity determined by user content—preventing the agent from compressing user content to match template numbers.

next/src/lib/templates/shared.ts

- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。

Crucial for frame-* single-frame templates: it characterizes the layout descriptions in the template as a 'reusable layout pool' rather than a production ceiling.

The loading convention is 'one skill = one folder': SKILL.md (YAML frontmatter for the selector + body as template prompt), optional example.md (sample input), and example.html (preview sample ready to open directly); adding a new template only requires adding a directory without modifying TS code.

next/src/lib/templates/loader.ts

* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker

The loader's loadSkillFromDir reads only these three file types, with no other asset loading channels—used during the second review pass to verify asset reachability.

The selection pipeline (CLI side) is a three-stage funnel: strong keyword signals (2 points per matched word, threshold of 3) → fallback to tags/scenario scoring → if still uncertain, sending the first 800 characters of user content to the local agent for a one-sentence classification.

cli/src/skills-matcher.ts

const CONFIDENCE_THRESHOLD = 3;

The exact prompt text for the AI fallback: const prompt = `Please describe in one sentence (no more than 15 words) what type of document the following content looks most like; answer with only the type name:`

The preview pipeline is decoupled from generation: /api/templates/<id>/preview returns example.html verbatim as text/html to the iframe; the frontend iframe uses sandbox="allow-scripts allow-same-origin".

next/src/components/preview-pane.tsx

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

Route comment: * Returns the skill's `example.html` verbatim so it can be loaded into an (Host-side trade-off: under the allow-scripts + allow-same-origin combination, scripts in the preview page can escape the sandbox themselves).

The template deconstructs 'a piece of data → one frame of a New York Times column-style chart' into a fixed layout: a top kicker (data source + category), a conclusion headline synthesized from the data, a chart area occupying 55-65% of the canvas, and a bottom source + footnote, delivered in a 16:9 single frame.