Design & Motion · nexu-io/html-anything
mobile-app
Pixel-perfect iPhone 15 Pro bezel frame, single-screen app screenshot
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 prompt body.
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
The repository describes its directory convention: '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-app", so this template has no special code-level handling.
The template body is not executed in isolation; rather, it is concatenated into the "template segment" of the final prompt: 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: '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); and then assembles it.
The global "content-driven quantity" rule overrides any numbers in the template: the template only defines layout/style/color palette/component library, not the output length.
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
This rule is marked as "highest priority, overriding any numbers in templates", and explicitly states that numbers like "6-10 slides" in deck templates "should always be treated as reference lower bounds under short examples". Thus, this template specifies available layouts and constraints, not an upper limit on pages.
Artifact format is globally hard-constrained: single-file HTML, pure HTML without fences, the first character must be <, and no file writing is allowed (frontend captures stdout).
next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
The same section explicitly states 'Prohibited from using 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 the picker 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=iPhone 15 Pro frame (no featured flag, placed after recommended buckets in the picker). The picker groups items by category/scenario and sorts by featured, entirely determined by frontmatter without custom code branches.
Bundled example assets are exposed to the frontend via two read-only APIs: example.html is returned as-is 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
The response header for example.html is 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 (6,249 bytes) and no example.md.
Execution chain (host behavior, not this template's code): the host spawns a locally authenticated agent CLI, feeds 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(),), with all stdio piped; the prompt is passed via stdin/--message rather than shell concatenation (not interpolated into a shell command).
The template only defines single-screen semantics (status bar -> header -> main content -> Tab bar) without providing a visual style checklist; styling is uniformly governed by shared design directives (typography, color, grid, animation).
next/src/lib/templates/skills/mobile-app/SKILL.md
- App header (标题 / 头像 / 搜索)
Unlike poster-hero or ppt-keynote, this template imposes no hard constraints on color palette or font sizes; it is a "structural" rather than a "stylistic" template.
Output length is inherently short: a single screen + four layout lines, which does not conflict with the shared directive's "content-driven quantity" rule (which applies to counts of slides, frames, cards, and sections).
next/src/lib/templates/skills/mobile-app/SKILL.md
【意图】一个屏幕的 mobile app 设计, 放在像素级 iPhone 15 Pro frame 里。
A single-screen template fits narrow needs like "I just want one app screenshot"; when there is substantial content, mobile-onboarding or prototyping templates should be used instead.
2Core Capabilities
01Information architecture skeleton for single-screen apps (four layers: status bar / app header / main content / bottom tab bar)
02Main content area must converge into a single explicit archetype, avoiding "a little bit of everything"
03Device realism details: dynamic island and safe-area margins specified in the requirements
04Pixel-perfect iPhone 15 Pro bezel frame as the scenario setting (single screen, no multi-screen narrative)
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 (required by shared design directives): The generated HTML references cdn.tailwindcss.com (Tailwind Play) and Google F in the browser
Audit Notes: Grading criteria: Only the local skill directory (SKILL.md + example.html) is evaluated; the host wrapper and artifact external links are excluded. The directory contains zero scripts, zero network endpoints, zero credential reading, and zero disk-writing commands: scanning the entire directory for tokens (api_key|token|secret|.env|process.env|child_process|fetch(|curl|wget|npm|npx|exec(|subprocess|writeFile|fs.) yields zero hits; SKILL.md also specifies no runtime CDN, font, or interface imports (no http/CDN/fetch/API strings). Two clarifications that do not alter the grading: ① 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}) constitutes host behavior and is documented in verdict.risks; ② Shared design directives injected by the host require the artifact's <head> to reference Tailwind Play / Google Fonts (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（像素级 iPhone 15 Pro 边框, 一屏 app 截图）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [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-app 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] 随包 example.html 的外链与脚本面 — mobile-app/example.html（6249 字节）全文无 http(s) 外链、无 <script>、无 <link>：样式为内联 CSS，属完全自包含的静态预览，预览 iframe 不会因它发起外部请求。
6Verdict & Scenarios
Best for: Suitable for scenarios requiring only "a single-screen iPhone app design draft": initial IA drafts for app home/detail pages, or showing non-design colleagues "what this page looks like". Most efficient when content is concise and primarily presented on a single screen.
Not for: Not suitable for requirements demanding narrative flow or long content (multi-screen flows, multi-page decks, long documents); also not suitable for scenarios requiring a specific brand color palette or typography system—the template imposes zero constraints on visual style, meaning stylistic consistency relies on shared directives and design instructions provided in the user content.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload mobile-app.tar.gz
sha256:
Option B · Copy Guide for Agentf478316a24ed4cc0…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.