Design & Motion · nexu-io/html-anything
mobile-onboarding
Three mobile phone frames side-by-side: splash / value-prop / sign-in
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 with regex and loads the body content as the main prompt body.
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
The repository's self-description of directory conventions: '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 "mobile-onboarding", indicating this template receives no special-case handling in code.
The template body is not executed in isolation, but spliced into the final prompt's "template section": shared design directives + template body + user content.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
assemblePrompt in shared.ts describes itself: 'Wrap a per-template instruction body with the shared design directives and the user content tail.'; the request first retrieves this directory's body via const skill = loadSkill(templateId); before assembly.
The global "content-driven quantity" rule overrides any numbers within the template: the template defines layout/style/palette/components, not the output length.
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
This rule is marked as "highest priority, overriding any numbers in templates", explicitly stating that numbers like "6-10 cards" in deck templates are "treated universally as a reference minimum for short examples". Thus, this template provides available layouts and constraints, not an upper limit on pages.
Artifact format is strictly constrained globally: single-file HTML, pure HTML without markdown fences, first character must be <, and no writing files directly (stdout captured by frontend).
next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
The same section explicitly states 'Prohibited from using Write / Edit / MultiEdit / Bash / Create / any filesystem tools'—file persistence is handled by the host frontend, with no write actions generated on the template side.
Frontmatter metadata 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=mobile, scenario=design, aspect_hint=3 × iPhone, featured=13. The selector groups by category/scenario and sorts by featured, entirely determined by frontmatter without hardcoded logic.
Bundled example assets are exposed to the frontend via two read-only APIs: example.html is returned directly 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; another route hands example text to the client via content: skill.exampleMd ?? "". This directory contains only example.html (8,899 bytes), with no example.md.
Execution 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);
The child process runs with cwd=process.cwd() (cwd: opts.cwd ?? process.cwd(),), all stdio piped; the prompt is passed via stdin/--message rather than shell interpolation (not interpolated into a shell command).
The template hardcodes "three screens" into a sequence of roles (Splash / Value-prop / Sign-in), specifying mandatory elements for each screen to reduce variance in model layout generation.
next/src/lib/templates/skills/mobile-onboarding/SKILL.md
- Phone 1: Splash (logo + tagline)
This is a rare strongly structured template among the nine that enforces "M screens = M roles"; the "content-driven quantity" in shared directives targets slides/frames/cards/sections, whereas the three screens here serve narrative roles and do not conflict with quantity limits.
The frontmatter uses featured: 13 to participate in selector ranking: the template's UI exposure position is determined by metadata, not code.
next/src/lib/templates/skills/mobile-onboarding/SKILL.md
featured: 13
Selector comments clarify that smaller featured values rank higher, and items without featured go to the end of the bucket; this template includes featured, placing it in the recommended bucket but ranked towards the end.
2Core Capabilities
01Three-screen side-by-side narrative (splash → value-prop → sign-in) explaining the onboarding flow at a glance
02Fixed structure for the first Splash screen: logo + tagline
03Mandatory value proposition + progress indicator on the second screen (illustration + single-line copy + dots)
04Concluding on the third screen with sign-in channels and primary CTA (email / Apple / Google)
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 references cdn.tailwindcss.com (Tailwind Play) and Google Fonts in the browser.
Audit Notes: . Evaluation scope: Evaluates only this skill directory (SKILL.md + example.html); the host shell and external links in artifacts are excluded from ranking. Inside the directory: zero scripts, zero network endpoints, zero credential reading, zero disk-writing instructions: token scans across the entire directory show zero hits; SKILL.md only mentions font families and platform names (Apple / Google as sign-in channel labels) without requesting any CDN, font, or API to be fetched at runtime. Two points noted purely for clarification without altering the rating: ① The host shell (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}) is host-level behavior and has been documented under verdict.risks; ② The shared design directives injected by the host require the artifact to reference Tailwind Play / Google Fonts in <head> (external runtime links within 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（三个手机框并排: splash / value-prop / sign-in）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [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/mobile-onboarding 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] "Apple / Google" 是否意味着 OAuth 接口调用 — SKILL.md 原文是登录屏的 UI 渠道按钮枚举（"- Phone 3: Sign-in (email / Apple / Google + 主 CTA)"），属界面布局指令；目录内无 OAuth SDK、无端点、无凭证字段，不构成运行时外发。
- [ok] 随包 example.html 的外链与脚本面 — mobile-onboarding/example.html（8899 字节）无 http(s) 外链、无 <script>：三台手机框与动效均由内联 CSS 绘制。
6Verdict & Scenarios
Best for: Ideal for communication scenarios that require explaining an app's onboarding flow in a single view: presenting onboarding in pitch/review decks, app store screenshot sets, or aligning on the onboarding funnel during design reviews.
Not for: Not suitable for single-screen requirements (use mobile-app); not suitable for requirements needing "interactive clickable prototypes for each screen"—the template produces static three-screen displays, interactive states are out of scope.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload mobile-onboarding.tar.gz
sha256:
Option B · Copy Guide for Agentd1cedb9fd0c6efdd…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.