Design & Motion · nexu-io/html-anything

frame-logo-outro

Name: frame-logo-outro
Author: nexu-io/html-anything

Logo piecewise assembly entrance + glow bloom + tagline reveal, suitable for video outros / brand closings

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 a site-wide shared design instruction, appends user content to assemble a prompt, passes it to 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 end /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 governs every template) pins the output as a 'self-contained single-file HTML' and explicitly forbids the agent from using filesystem tools like Write/Edit/Bash, streaming HTML directly as conversation text.

next/src/lib/templates/shared.ts

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

This is the source of capability boundaries for this skill batch: the artifact is merely text, while disk writes and rendering are handled by the host frontend; this prohibition is a prompt soft constraint, not hard sandbox isolation.

Beyond SKILL.md, there is a 'content-driven quantity' override rule: any page, frame, or card count specified in the template is strictly treated as a reference baseline minimum; the actual quantity is 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 particularly critical for frame-* single-frame templates: it characterizes the layout description in the template as a 'reusable layout pool' rather than an output cap.

The loading convention is 'one skill = one directory': SKILL.md (YAML frontmatter for the selector + body as template prompt), optional example.md (sample input), and example.html (directly openable preview sample); adding new templates only requires adding directories 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 types of files and has no other asset loading channels—used during the second pass to verify asset reachability for this skill.

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

cli/src/skills-matcher.ts

const CONFIDENCE_THRESHOLD = 3;

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

The preview pipeline is independent of generation: /api/templates/<id>/preview returns example.html as text/html verbatim 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 remove the sandbox themselves).

The logo is not an image but required to be 4-8 geometric blocks (circle / square / triangle / hairline) drawn with CSS / inline SVG. Upon entrance, each block slides in from different off-screen directions + scale 1.4→1.0 + opacity 0→1, staggered by 80ms across a 1.2s total duration.