Design & Motion · nexu-io/html-anything

frame-glitch-title

Name: frame-glitch-title
Author: nexu-io/html-anything

Digital glitch / chromatic aberration offset / data corruption title, suitable for video transitions / cyberpunk hero sections

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 the user content, and concatenates them into a single prompt handed to the logged-in agent, then 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 uses 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' and explicitly forbids the agent from using file system tools like Write/Edit/Bash; the HTML is directly streamed out as conversation body text.

next/src/lib/templates/shared.ts

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

This is the source of capability boundaries for this batch of skills: deliverables are text only, with disk persistence and rendering 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 dictated by user content—preventing the agent from compressing user content to match template numbers.

next/src/lib/templates/shared.ts

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

Particularly crucial for frame-* single-frame templates: it designates 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 text as the template prompt), optional example.md (sample input), and example.html (directly openable preview sample); adding new templates 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—used during the second pass to verify asset reachability for this skill.

The selection pipeline (CLI side) is a three-tier funnel: strong keyword signals (2 points per matched word, threshold 3) → falls back to tags/scenario scoring → if still uncertain, passes 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 AI fallback prompt: const prompt = `请用一句话（不超过15个字）描述以下内容最像什么类型的文档，只需回答类型名称：

The preview pipeline is independent of generation: /api/templates/<id>/preview returns example.html verbatim to the iframe as text/html; 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 on the preview page can escape the sandbox on their own).

The glitch effect is decomposed into stackable layers: a centered 6-9vw white layer for the main title, backed by cyan #00f0ff and magenta #ff2bd6 offset artifact layers to produce chromatic aberration astigmatism.