Docs & Knowledge · nexu-io/html-anything
pm-spec
Problem + Success Metrics + Scope + User Stories + Design + Release + Open Questions
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 using regex and loads the body as the primary prompt.
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
The repository's documentation on 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 via directory conventions; there are no hardcoded references to "pm-spec" in the entire repository's TS/TSX codebase, and this template receives no special-case handling in code.
The template body is not executed in isolation; instead, it is 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 });
assemblePrompt in shared.ts states: '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 specified 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 with "highest priority, overriding any numbers in the template", and explicitly states that numbers like "6-10 slides" in deck templates are "invariably treated as reference lower bounds under short examples". Therefore, this template provides usable layouts and constraints, not an upper page limit.
The artifact format is strictly enforced globally: a 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 also specifies 'Do not use Write / Edit / MultiEdit / Bash / Create / any filesystem tools'—saving files to disk is handled by the host frontend, and no disk write operations occur on the template side.
The frontmatter metadata drives the selector display (Chinese name/English name/emoji/description/category/scenario/aspect ratio/tags/sample metadata).
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
Metadata for this template: category=doc, scenario=product, aspect_hint=long page (no featured flag, placed behind recommended buckets in the selector). The selector groups by category/scenario and sorts by featured, entirely determined by frontmatter with no special-case code logic.
Bundled sample 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 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 provides sample text to the client via content: skill.exampleMd ?? "". This directory contains only example.html (14,291 bytes) and 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(),) and full stdio piping; the prompt is passed via stdin/--message rather than shell string interpolation (not interpolated into a shell command).
The template specifies "section order + per-section quantity/syntax constraints", serving as a reading order specification rather than a purely visual specification (stated intent: "Single-page product requirements document, clearly structured").
next/src/lib/templates/skills/pm-spec/SKILL.md
【意图】产品需求文档单页, 结构清晰。
Unlike design-oriented templates, this template imposes almost no constraints on colors or font sizes; its value lies in standardizing the essential sections of a PRD.
Two hard quantity/syntax constraints (3-5 KPIs; Given/When/Then for user stories) make the output comparable and reviewable, rather than freeform prose.
next/src/lib/templates/skills/pm-spec/SKILL.md
- Success metrics (3-5 个 KPI)
While shared directives specify that the count of slides/frames/cards/sections is content-driven, the "3-5 KPIs" constraint here serves to enforce focus on the content itself (too many metrics = lack of focus), so there is no conflict.
The long-page positioning (aspect_hint: long page), combined with typography rules from shared directives (8px baseline, max paragraph width of 65ch), yields a single-file document ready for immediate reading.
next/src/lib/templates/skills/pm-spec/SKILL.md
- Rollout plan + Open questions
The example.html in this directory reaches 14,291 bytes, making it the largest preview artifact among the 9 templates and aligning with its "long page" positioning.
2Core Capabilities
01Document header includes a status pill (draft/approved/shipped), integrating the document lifecycle into the layout
02Limits success metrics to 3-5 KPIs to avoid metric clutter
03Explicitly bifurcates scope into: in / out
04Enforces the Given/When/Then syntax for user stories
05Design notes section reserves placeholder space for mockups
06Concludes with a release plan and open questions
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 Fonts in the browser.
Audit Notes: Evaluation scope: Only evaluates this skill directory (SKILL.md + example.html); host shell and external links in the artifact are excluded from classification. The directory contains zero scripts, zero network endpoints, zero credential access, and zero disk-writing commands: zero hits across all token scans; SKILL.md does not specify any CDN, fonts, or APIs to be imported at runtime. Two informational notes that do not alter 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}) 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 are runtime external links in the generated 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（问题 + 成功指标 + 范围 + user stories + 设计 + 发布 + 待解决）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [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/pm-spec 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] "设计备注含 mockup 占位"是否意味着抓取外部图 — 原文是 "- Design notes (含占位 mockup)"，即版面占位；共享指令另有"不要引用任何外部图片 URL"的禁令，方向一致，不存在外链图片要求。
- [ok] 随包 example.html 的外链与脚本面 — pm-spec/example.html（14291 字节）无 http(s) 外链、无 <script>：长文档排版全部内联 CSS，预览不会产生外部请求。
6Verdict & Scenarios
Best for: Ideal for rapidly transforming existing requirements into a review-ready PRD single page: problem statement, metrics, scope, user stories, and release plan generated in one go for product, engineering, and design reviews.
Not for: Not suitable for formal deliverables requiring strict corporate template compliance (complete enterprise PRD fields, formal review and sign-off workflows)—this template only provides section structure and syntax guidance without field validation; not suitable for purely visual presentation needs (posters or deck templates should be used instead).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload pm-spec.tar.gz
sha256:
Option B · Copy Guide for Agent3cd90ed0d79647d1…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.