Design & Motion · nexu-io/html-anything
pricing-page
Three-tier pricing + feature comparison table + FAQ
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'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 are registered purely by directory convention; no hardcoded references to "pricing-page" exist anywhere in the repository's TS/TSX codebase, and this template receives no special-case code handling.
The template body is not executed in isolation, but assembled 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 });
shared.ts assemblePrompt states: 'Wrap a per-template instruction body with the shared design directives and the user content tail.'; requests first fetch the body of this directory via const skill = loadSkill(templateId); before assembly.
The global "content-driven quantity" rule overrides any numbers within the template: the template only defines layout/style/color palette/component libraries, not output length.
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
This rule is marked as 'highest priority, overriding any numbers in the template', explicitly noting that numbers like '6-10 slides' in deck templates are 'always treated as a reference lower bound under short examples'. Thus, this template defines available layouts and constraints, not an upper page limit.
The output format is governed by strict 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 'Prohibited from using Write / Edit / MultiEdit / Bash / Create / any filesystem tools'—persisting files to disk is handled by the host frontend, and no disk-writing behavior occurs on the template side.
Frontmatter metadata 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=prototype, scenario=sales, aspect_hint=desktop 1440 (not featured, placed after the recommended bucket in the selector). The selector groups items by category/scenario and sorts by featured, all driven entirely by frontmatter without special-cased code.
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 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 (7117 bytes) and no example.md.
Execution chain (host behavior, not template code): the host spawns a locally logged-in agent CLI, pipes 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(),) with all stdio piped; the prompt is passed via stdin/--message rather than shell concatenation (not interpolated into a shell command).
The template's goal is to "align value with price at a glance": a five-stage structure comprising Header / Three Cards / Comparison Table / FAQ / CTA, explicitly highlighting the middle tier (a common price-anchoring technique).
next/src/lib/templates/skills/pricing-page/SKILL.md
【意图】标准 SaaS 三档定价页, 一眼对齐价值与价格。
Unlike the full-site landing approach of prototype-web, this template focuses solely on the pricing conversion page, featuring a narrower scope with greater depth (including a comparison table and FAQ).
The FAQ specifically uses native <details>/<summary>, enabling collapsible interactions with zero JS and making the artifact more robust (usable in screenshots, static hosting, and scriptless environments).
next/src/lib/templates/skills/pricing-page/SKILL.md
- FAQ (details/summary)
Shared directives require the artifact to be a self-contained, directly openable single file; native disclosure widgets perfectly meet the 'progressive enhancement' requirement.
2Core Capabilities
01Billing cycle toggle slot (monthly/annual)
02Three-tier pricing cards with middle tier highlighted as popular
03Full feature comparison table (including tier-specific checkmark dimensions)
04Native details/summary for collapsible FAQ
05Bottom closing CTA
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): the generated HTML imports cdn.tailwindcss.com (Tailwind Play) and Google Fonts in the browser.
Audit Notes: Evaluation criteria: Only this skill directory (SKILL.md + example.html) is evaluated; the host shell and external links in the artifact are excluded from scoring. The directory contains zero scripts, zero network endpoints, zero credential reads, and zero disk-writing instructions: a full directory token scan returned zero hits; SKILL.md mentions no CDNs, fonts, or APIs to be imported at runtime. Two notes for clarification that do not alter the rating: ① The host shell (loader.ts → assemblePrompt → agents/invoke.ts spawning the local CLI; claude arguments including --permission-mode bypassPermissions, and envFor passing all environment variables via {...process.env}) represents host behavior and has been documented under verdict.risks; ② The shared design directives injected by the host require the artifact to import Tailwind Play / Google Fonts in the <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（三档定价 + 特性对比表 + FAQ）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [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/pricing-page 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] 页面里的"切换"是否需要 JS 或接口 — SKILL.md 只要求版面存在切换位（"- Header + monthly/annual 切换"），未要求接计价接口或写切换逻辑；目录内无脚本、无端点，产物可为纯 CSS/静态交互。
- [ok] 随包 example.html 的外链与脚本面 — pricing-page/example.html（7117 字节）无 http(s) 外链、无 <script>：卡片/对比表/FAQ 全部内联 CSS 实现。
6Verdict & Scenarios
Best for: Ideal for SaaS pricing page design drafts or landing page prototypes: three-tier packages, tier comparison table, objection-handling FAQ, and a bottom conversion CTA—all in one complete package.
Not for: Not suitable for non-SaaS business models (one-time purchases, usage-based billing, multi-currency tax displays, and other complex pricing schemes are outside the specification); not suitable for development requirements involving live billing APIs or real payment processing—the template produces static pages only.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload pricing-page.tar.gz
sha256:
Option B · Copy Guide for Agent5bfaf951bbc55604…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.