vfx-text-cursor
Cursor light trail + chromatic aberration rays + directional light flares, ideal for word-by-word quote reveals in video title sequences.
1How It Works & Mechanism
This skill is not an executable program, but rather an html-anything "template": a directory (SKILL.md + example.html[/example.md]) scanned and read from disk at runtime by loader.ts—adding a new template simply means adding a new directory without modifying TypeScript.
Adding a template = adding a folder. No TS code change required; the API
The frontmatter contains metadata for the picker/API (zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags) mapped to SkillMeta via fmToMeta(); only the body text following the frontmatter serves as specifications for the model.
zhName: fm.zh_name ?? fm.name ?? id,
During generation, this template body is treated as the prompt body: /api/convert uses assemblePrompt() to concatenate "global design directives + this template's body + user content" into a single prompt, passed to the host's local agent CLI, with HTML captured via stdout streaming.
prompt = assemblePrompt({ body: skill.body, content, format });
A block of global shared directives (SHARED_DESIGN_DIRECTIVES) precedes the template body, enforcing unified technical and content discipline across every template—external CDN/font links commonly found in example HTML originate here (injected by the host shell, not requested by the template itself).
通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。
Artifacts are returned as stdout text: global directives explicitly forbid the agent from touching the file system, leaving persistence to the front end—thus the template directory has neither scripts nor disk-writing capabilities.
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
example.html is a pre-rendered example shipped with the bundle: /api/templates/<id>/preview returns it verbatim as text/html to an iframe (for inline preview in the picker), while /api/templates/<id>/example returns both example.md and example.html together.
return new Response(skill.exampleHtml, {
The body details motion effects as verifiable timing specifications: word-by-word reveal at 80ms/word, cursor block following the active character, and chromatic ghost appearing at the moment of reveal and converging within 200ms.
- 逐字揭示, 每个字符 80ms 间隔; 当前字符后面跟着一个 cursor `▍` (或细 vertical bar)。
Flares and rays are synthesized using CSS rather than bitmaps: elongated rectangles with linear-gradient + mix-blend-mode: screen, 3–5 randomized rays at irregular angles.
- 在打字位置附近随机生成 3-5 道**定向光斑** (light leak)
Explicit negative constraints specify "what not to do": use only a single binary aberration of hot pink + cyan, prohibit full-color R/G/B rainbows, and strictly forbid serif fonts.
- **绝不**: 多色彩虹 chromatic (只用 1 个 hot pink + cyan 这种二元像散, 不要 R/G/B 全色)。
Accessibility and content authenticity are baked into the body: animations must be toggleable via prefers-reduced-motion (displaying all text immediately), and user-provided quotes must be used without fabrication.
- 必须用用户提供的金句; 不要捏造。
The example HTML delivers only a "single static frame": the cursor block blinks via CSS blink animation, chromatic aberration is a static text-shadow across the full text, and the three .ray elements have fixed angles—there is no word-by-word JS timer, no shimmer, and no prefers-reduced-motion fallback.
animation: blink 1s steps(1) infinite;
The CLI side features a direct keyword matching channel: skills-matcher.ts directly maps keywords in user content to this template id; a hit assigns confidence = hit count * 2 + 3, and reaching the threshold of 3 triggers local rules without asking the model to select a template.
[["VFX", "特效", "光标", "cursor", "chromatic", "reveal"], "vfx-text-cursor"],
Threshold constants used in CLI fallback matching: content length must exceed 60 characters to enable AI summary matching; the strong signal threshold is 3.
const MIN_CONTENT_LENGTH_FOR_AI = 60;
The host shell renders examples/artifacts using an iframe with sandbox="allow-scripts allow-same-origin" (allowing scripts and same-origin access)—this is a host product trade-off, noted as a risk, and does not affect this skill's grading.
sandbox="allow-scripts allow-same-origin"
2Core Capabilities
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind CDN（示例 HTML 引用） |
| network | Google Fonts（Inter Tight / Noto Sans SC / JetBrains Mono） |
| network | 示例来源标注（frontmatter 元数据，非运行依赖） |
4Recommended Governance & Evidence
- SKILL.md: Pure prompt directives and rule text, without script execution or external side effects
5Second-Pass Verification
- [ok] skill 目录文件清单 — find 得 SKILL.md + example.html + example.md，无 scripts/references。
- [ok] 外部端点只出现在示例/元数据 — SKILL.md 正文无 URL；两个 URL 分别位于 frontmatter example_source_url（元数据）与 example.html 的 Tailwind CDN / Google Fonts link。
- [discrepancy] 逐字揭示/计时器是否在示例中实现 — SKILL.md 写明「@keyframes + JS 计时器 (setTimeout 逐字)」与 0.5s shimmer、reduced-motion 降级；example.html 只有 CSS blink 光标 + 静态 text-shadow，grep 无 setTimeout / prefers-reduced-motion / shimmer，属示例未实现正文声明的动效（示例是静帧预览）。
- [discrepancy] 「不要外链字体以外的资源」是否被示例遵守 — 正文禁非字体外链，但 example.html 引入 https://cdn.tailwindcss.com 脚本；该 Tailwind 要求实为宿主全局指令（shared.ts）强制，说明模板正文与宿主壳在此点冲突。
- [discrepancy] chromatic 只在 reveal 瞬间 vs 示例静态 — 正文要求像散在 reveal 瞬间出现并 200ms 内收敛；示例 .chroma 是整段 h1 的静态 text-shadow。
- [ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["VFX", "特效", "光标", "cursor", "chromatic", "reveal"], "vfx-text-cursor"] 行。
- [ok] 判级 green 自证 — 目录零脚本文件、零凭证、零写盘；正文未点名运行时接口，端点仅见示例与 frontmatter 元数据 → green。
- [ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文。
6Verdict & Scenarios
315c18b1b92b614f…