Design & Motion · nexu-io/html-anything

frame-light-leak-cinema

Name: frame-light-leak-cinema
Author: nexu-io/html-anything

Film light leaks + granular noise + 16:9 letterbox + large serif typography, cinematic title / chapter cards

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 SKILL.md body, prepends a site-wide shared design instruction, appends user content, assembles it 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 instruction → skill body → input format → user content; the web endpoint /api/convert uses the same function: prompt = assemblePrompt({ body: skill.body, content, format });

The shared instruction layer (which does not belong to any single skill but is enforced over every template) locks the output to 'self-contained single-file HTML' and explicitly forbids the agent from using file system tools like Write/Edit/Bash, streaming HTML directly as conversation body text.

next/src/lib/templates/shared.ts

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

This defines the capability boundary for this batch of skills: outputs are purely text, with file persistence and rendering handled by the host frontend; this restriction is a prompt-level soft constraint, not hard sandbox isolation.

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

next/src/lib/templates/shared.ts

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

This is especially critical 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), with optional example.md (sample input) and example.html (directly openable preview sample); adding a 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 only reads these three types of files and has no other asset-loading channels—the second pass verifies the asset reachability of this skill accordingly.

The selection pipeline (CLI side) follows a three-stage funnel: strong keyword signals (2 points per matched keyword, threshold 3) → fall back to tags/scenario scoring → if still uncertain, pass 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;

Original fallback prompt for the AI: const prompt = `请用一句话（不超过15个字）描述以下内容最像什么类型的文档，只需回答类型名称：`

The preview pipeline is independent of 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 on their own).

The canvas is the key visual identifier of this template: a 2.39:1 letterbox (1920×800, with 140px black bars on top and bottom) is recommended, while full-frame 16:9 (1920×1080) is also supported.