Design & Motion · nexu-io/html-anything
motion-frames
Loopable CSS motion effect suite: rotating ring, globe, timer, parallax tags
L3 Networked · Declare domain & key scopeV1 Commit-PinnedNetwork AccessDual-pass Audit
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 plain text prompt template: the host parses the YAML frontmatter of SKILL.md via regex and loads the main body as the core prompt.
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
The repository's self-description of directory conventions states: 'SKILL.md — frontmatter (id, scenario, tags, …) + prompt body', and 'Adding a template = adding a folder. No TS code change required'—templates register via directory conventions; searching the entire TS/TSX codebase yields no hardcoded references to "motion-frames", so this template is never specially handled in code.
The template body is not executed in isolation; instead, it is assembled into the final prompt's "template section": shared design directives + this template body + user content.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
assemblePrompt in shared.ts describes itself as: 'Wrap a per-template instruction body with the shared design directives and the user content tail.'; the request first retrieves the body of this directory via const skill = loadSkill(templateId); before assembly.
The global "content-driven quantity" rule overrides any number within the template: the template only defines layout/style/color palette/component library, not output length.
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
This rule is marked as "highest priority, overrides any numbers in the template", explicitly noting that numbers like "6-10 slides" in deck templates are "always treated as reference lower bounds under short examples". Thus, this template defines available layouts and constraints, not an upper limit on pages.
The output format is subject to hard global constraints: single-file HTML, pure HTML without fences, the first character must be <, and no file writing is permitted (stdout is captured by the frontend).
next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
The same section explicitly states 'Forbidden to use Write / Edit / MultiEdit / Bash / Create / any filesystem tools'—persisting files to disk is handled by the host frontend, and no disk write operations occur on the template side.
Metadata from the frontmatter drives the selector display (Chinese name/English name/emoji/description/category/scenario/aspect ratio/tags/example metadata).
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
Metadata for this template: category=video, scenario=marketing, aspect_hint=desktop hero, featured=6. The selector groups by category/scenario and sorts by featured, all determined by frontmatter without custom code branching.
Bundled example assets are exposed to the frontend via two read-only APIs: example.html is returned verbatim into an iframe, while example.md serves as the input content for the "Preview" button.
next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
example.html responds with the header Content-Type: text/html; charset=utf-8; another route delivers example text to the client via content: skill.exampleMd ?? "". This directory contains only example.html (8402 bytes) and lacks example.md.
Invocation chain (host behavior, not template code): The host spawns a locally authenticated agent CLI, feeds the assembled prompt via stdin, and streams HTML back from stdout.
next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
Child processes run with cwd=process.cwd() (cwd: opts.cwd ?? process.cwd(),) with all stdio piped; the prompt is passed via stdin/--message rather than shell interpolation (not interpolated into a shell command).
The template breaks down motion effects into four independently implementable components (ring, globe, timer, parallax tags), providing implementation methods for each (SVG+transform / mono font), so the model does not need to choose a tech stack.
next/src/lib/templates/skills/motion-frames/SKILL.md
- Rotating type ring (SVG + transform)
The component granularity is finer than poster-hero, making it a "modular assembly" rather than a "monolithic poster" template.
"Pure CSS motion, smooth and loopable" combined with "JS optional" forms a strong constraint: no JS by default, looping relies on CSS animations, and the artifact is inherently self-contained.
next/src/lib/templates/skills/motion-frames/SKILL.md
- 纯 CSS 动效, 流畅可循环
This choice is the exact opposite of ppt-keynote (which requires keyboard JS): this template targets "unattended looping backgrounds/openers", where interactivity is not required.
2Core Capabilities
01Rotating text ring (SVG + transform)
02Dynamic globe / abstract geometry as the key visual
03Monospace timer (JS optional)
04Parallax floating tag layer
05Production-grade motion discipline: pure CSS, seamlessly loopable
06Cinematic color grading + single neon accent color
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Declare allowed domains and key scope
For Administrators
Least privilege keys, retain request logs
Evidence & Triggers (File Paths & Excerpts)
- 网络端点: Declared external network access: Artifact side (mandated by shared design directives): Generated HTML imports cdn.tailwindcss.com (Tailwind Play) and Google F in the browser
Audit Notes: . Grading criteria: Only evaluate this skill directory (SKILL.md + example.html); host wrappers and artifact external links are excluded from grading. The directory contains zero scripts, zero network endpoints, zero credential reading, and zero disk write instructions: token scanning across the entire directory yields zero matches; SKILL.md names no CDNs/fonts/APIs (not even Google Fonts is mentioned, using only generic font family descriptions like "mono font"). example.html is also self-contained (no external http links, no <script>). Two explanatory points that do not affect the rating: ① The host wrapper (loader.ts → assemblePrompt → agents/invoke.ts spawning the local CLI; claude arguments include --permission-mode bypassPermissions, and envFor passes all environment variables via {...process.env}) represents host behavior and is recorded under verdict.risks; ② The shared design directives injected by the host require the artifact to reference Tailwind Play / Google Fonts in <head> (which constitutes runtime external links of the artifact).
5Second-Pass Verification
- [ok] skill 目录资产面（脚本 / references / 数据 / 模板） — 目录实为 2 个文件：SKILL.md 与 example.html；无 scripts/、无 references 目录、无任何可执行文件（.sh/.py/.js/.mjs/.ts 零命中）。
- [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描（api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.）：零命中；SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描，仅命中 font-semibold / font-black 这类字重类名，无端点。
- [ok] 官方描述 vs 实际能力（有无夸大） — frontmatter description（可循环 CSS 动效组合: 旋转环、地球仪、计时器、视差标签）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目（Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI）逐条回到 shared.ts 与 argv.ts 原文取证；本模板无目录级端点条目。
- [ok] 宿主执行链（供 security.reason / verdict.risks 使用，不参与判级） — prompt 经 stdin 送入被 spawn 的本机 CLI（invoke.ts），HTML 从 stdout 分流捕获；claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env；预览 iframe sandbox="allow-scripts allow-same-origin"（template-picker.tsx:544 / preview-pane.tsx:297）。
- [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 一致）；skill.path=next/src/lib/templates/skills/motion-frames 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] "CSS 动效"是否借道外部动画库 — SKILL.md 明确"纯 CSS 动效, 流畅可循环"，未要求引入 GSAP/Lottie 等库；example.html 中无 <script>、无 CDN 外链，动效由内联 CSS 实现，故不存在外部动画依赖。
- [ok] 是否真的无 JS — SKILL.md 允许"JS 可有可无"，即产物里可能含可选 JS，但那是交给模型写进产物（自包含），不是 skill 调外部脚本；skill 目录内无任何 JS 文件。
6Verdict & Scenarios
Best for: Suitable for "glanceable, non-interactive" motion frames such as video intros/transitions, landing page heroes, and social media animated covers; also suitable for reusing component concepts when upgrading static heroes to lightweight motion.
Not for: Not suitable for engineering needs requiring precise timeline control or rendering to MP4 (lacks duration/transition markers, making it web animation rather than video engineering; for MP4, choose the video-hyperframes series in the repository); not suitable for motion effects requiring interactivity or data-driven updates.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload motion-frames.tar.gz
sha256:
Option B · Copy Guide for Agent6c0a8c77753d9758…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.