Design & Motion · nexu-io/html-anything
mockup-device-3d
iPhone + MacBook pseudo-GLTF static display stand, embedded with real HTML screen content, glass lens refraction, 360° turntable composition
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 body as the core prompt.
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
The repository describes directory conventions as: 'SKILL.md — frontmatter (id, scenario, tags, …) + prompt body', and 'Adding a template = adding a folder. No TS code change required'—templates are registered via directory conventions; searching the entire TS/TSX codebase yields no hardcoded references to "mockup-device-3d", meaning this template is not specially handled by any code.
The template body is not executed in isolation; instead, it is concatenated into the "template section" of the final prompt: shared design directives + this template's body + user content.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
assemblePrompt in shared.ts states: 'Wrap a per-template instruction body with the shared design directives and the user content tail.'; the request first fetches this directory's body via `const skill = loadSkill(templateId);` before assembly.
The global "content-driven quantity" rule overrides any numerical value in the template: the template only defines layout/style/palette/component library, not the output length.
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
This rule is marked with 'highest priority, overriding any numbers in the template', explicitly noting that numbers like '6-10 slides' in deck-type templates are 'strictly considered reference lower bounds under short examples'. Thus, this template provides 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 markdown code 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 'Prohibit the use of Write / Edit / MultiEdit / Bash / Create / any filesystem tools'—persisting files to disk is handled by the host frontend, and no file-writing actions occur on the template side.
Metadata in the frontmatter drives selector presentation (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=poster, scenario=product, aspect_hint=1920×1080 (16:9), featured=47. The selector groups by category/scenario and sorts by featured, entirely determined by the frontmatter without special code handling.
Bundled example assets are exposed to the frontend via two read-only APIs: example.html is returned as-is into an iframe, and 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
The response header for example.html is `Content-Type: text/html; charset=utf-8`; the other route delivers the example text to the client via `content: skill.exampleMd ?? ""`. This directory contains: example.md (434 bytes) and example.html (8958 bytes).
Execution chain (host behavior, not this template's code): The host spawns a locally logged-in agent CLI, pipes the assembled prompt via stdin, and streams back the HTML from stdout.
next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
The child process runs with cwd=process.cwd() (`cwd: opts.cwd ?? process.cwd(),`), all stdio is piped, and the prompt is fed through stdin/--message rather than shell string concatenation ('not interpolated into a shell command').
This is the most strictly specified template among the 9: executable parameters are provided for canvas, device placement, material color, reflections, flares, and animations, leaving almost no room for freeform model deviation.
next/src/lib/templates/skills/mockup-device-3d/SKILL.md
- **画布**: 1920×1080, 暖灰渐变背景
The template notes 'Inspired by hyperframes vfx-iphone-device' and marks the origin in the frontmatter with example_source_url (serving as an attribution note, not a runtime request).
Two screen content sources are routed conditionally in the template: text triggers 'auto-rendering a mock app interface', while HTML triggers 'embedding as-is', explicitly avoiding iframe/srcdoc in favor of div+Tailwind to prevent nested document issues.
next/src/lib/templates/skills/mockup-device-3d/SKILL.md
用户提供的是 HTML → 原样嵌入屏幕 div 内
The same passage states 'Single-file HTML; do not use srcdoc nesting in iframes (prone to issues), use `<div class="screen">` + Tailwind to render content'—this is also the sole 'external content embedding' surface of this template: embedding the user's own HTML.
Animations are explicitly designed to be toggleable: @keyframes turntable performs an 8s back-and-forth swing between rotateY -12 ↔ 12, with support for disabling via prefers-reduced-motion.
next/src/lib/templates/skills/mockup-device-3d/SKILL.md
@keyframes turntable
Accessibility considerations are baked directly into the template body, making it the only template among the 9 to feature motion preference handling.
2Core Capabilities
01Simulate a GLTF device showcase using CSS 3D transforms (1920×1080 canvas + reflective floor)
02Hardcode iPhone placement and materials into transform / border color / border radius / screen dimensions
03Dual screen content handling: user-provided text → render mock app interface; user-provided HTML → embed as-is inside screen div
04Prohibit externally linked mockup images; devices must be drawn on-the-fly via CSS / SVG
05Anti-placeholder discipline: real user data must populate the screen
06Optional 8-second turntable animation with prefers-reduced-motion support
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
| network | 随包示例 example.html 的外链（产物示例） |
| network | 示例出处标注（frontmatter，非运行时请求） |
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: No network request code inside the directory; bundled example.html references https://cdn.tailwindcss.com in <head> (example artifact external link,
Audit Notes: . Evaluation scope: Evaluates only this skill directory (SKILL.md + example.html/example.md); the host shell and external links in generated artifacts do not affect the rating. Inside the directory: zero scripts, zero credentials, zero disk-writing instructions, and no runtime external links mandated by SKILL.md. Three endpoints actually appear in the directory, all serving as artifacts/attributions rather than skill execution commands: ① example.html imports cdn.tailwindcss.com in <head> (bundled static preview); ② example_source_url=https://hyperframes.heygen.com/catalog in frontmatter serves as source attribution (for frontend display); ③ SKILL.md body cites hyperframes vfx-iphone-device as an inspiration source. Clarification: "never link external mockup image URLs" is a prohibition rule, not an outbound request requirement. Two notes provided for context without modifying rating: ① Host wrapper (loader.ts → assemblePrompt → agents/invoke.ts spawns local CLI; claude args include --permission-mode bypassPermissions, envFor transparently forwards all environment variables via {...process.env}) is host behavior, documented in verdict.risks; ② Host-injected shared design directives mandate that the output HTML link Tailwind Play / Google Fonts in <head> (runtime external links for generated artifacts).
5Second-Pass Verification
- [ok] skill 目录资产面（脚本 / references / 数据 / 模板） — 目录实为 3 个文件：SKILL.md 与 example.html、example.md；无 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（iPhone + MacBook 仿 GLTF 静态展架, 屏幕内嵌真实 HTML 内容, 玻璃镜头折射, 360° 转盘构图）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目（Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI）逐条回到 shared.ts 与 argv.ts 原文取证；本模板另有 example.html 的 cdn.tailwindcss.com 外链，已在该 example.html 原文中定位。
- [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/mockup-device-3d 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] "屏幕内嵌用户 HTML"是否等于外部内容注入 — SKILL.md 说的"原样嵌入屏幕 div 内"是把用户提供的 HTML 渲染进产物里的 <div class="screen">（同页同上下文），不是把远端页面抓进 skill；目录内无抓取代码。风险仍在产物侧（嵌入脚本与会话同域执行），已写入 verdict.risks。
- [ok] example_source_url 会不会被运行时请求 — loader.ts 仅把它当字符串放进 meta.example.source（fm.example_source_url ? {...} 分支），preview / example 两个路由只做 loadSkill + 返回 JSON 或 HTML；全仓未见对该 URL 的 fetch。
6Verdict & Scenarios
Best for: Suitable for product launches, app demos, and design presentations: single-image or single-page showcases requiring 'placing UI inside a real device screen' when 3D asset preparation is impractical.
Not for: Not suitable for video-grade requirements demanding true 3D rotation/camera movement (this template is a pseudo-GLTF static CSS showcase); not suitable for scenarios requiring official device renders or external mockup assets—the template strictly prohibits externally linked mockup images.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload mockup-device-3d.tar.gz
sha256:
Option B · Copy Guide for Agent26cd54243c71eab9…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.