Design & Motion · nexu-io/html-anything

weekly-update

Name: weekly-update
Author: nexu-io/html-anything

6-8 page horizontal scrolling weekly report: Shipped / In Flight / Blocked / Metrics / Asks

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE 文件；GitHub API license.spdx_id = Apache-2.0）Commit 553ed98c28

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 rather a "template" for html-anything: a directory (SKILL.md + example.html[/example.md]) scanned and read from disk by loader.ts at runtime—adding a template simply means adding a directory, with no TypeScript changes required.

next/src/lib/templates/loader.ts

Adding a template = adding a folder. No TS code change required; the API

SKILLS_DIR is fixed at src/lib/templates/skills relative to the app's cwd; listSkills() iterates through first-level subdirectories, filters them via isValidBundledId, reads SKILL.md per directory, and parses frontmatter. Thus, the "selector metadata" and the "prompt body used for generation" originate from the very same file.

The frontmatter contains metadata for the selector/API (zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags), mapped into SkillMeta via fmToMeta(); only the body text following the frontmatter serves as the specification for the model.

next/src/lib/templates/loader.ts

zhName: fm.zh_name ?? fm.name ?? id,

The id is derived from the directory name; example metadata (example_id/name/format/tagline/desc/source_url) produces SkillExampleMeta only when the directory includes example.md/html. The body is intentionally excluded from the listing API (code comment: "Body is excluded so we can return the entire registry in one cheap fetch").

During generation, the template body is treated as the prompt body: /api/convert uses assemblePrompt() to concatenate "global design directives + this template's body + user content" into a single prompt, which is handed to the host's local agent CLI, and HTML is captured via stdout streaming.

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

The same route also contains editFromHtml/editFromContent "minimal diff edit" branches; throughout this pipeline, the template body is strictly treated as a string, without evaluation or execution.

A block of global preamble directives (SHARED_DESIGN_DIRECTIVES) is prepended above the template body, standardizing technical and content disciplines before each template—external CDN/font links commonly found in example HTML originate here (injected by the host wrapper, not requested by the template itself).

next/src/lib/templates/shared.ts

通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。

The template body only dictates style/layout/components and does not repeat these rigid requirements; grading evaluates solely the template's own directory, while this endpoint behavior belongs to the host wrapper and is documented under security.reason for auditability.

The output is returned as stdout text: global directives explicitly forbid the agent from accessing the file system, leaving disk writing to the front end—consequently, the template directory possesses neither scripts nor disk-writing capabilities.

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

The original instructions state: "Do not write HTML to any .html file... the front end directly captures your stdout text, and disk writing is handled by the front end"; the output is ultimately saved to task logs and exported by the front end.

example.html is a pre-rendered example bundled with the package: /api/templates/<id>/preview returns it as text/html verbatim to the iframe (for inline selector preview), while /api/templates/<id>/example returns both example.md and example.html together.

next/src/app/api/templates/[id]/preview/route.ts

return new Response(skill.exampleHtml, {

The example is used purely for preview/documentation and does not participate in prompt generation (generation uses only the SKILL.md body); therefore, its external links do not impact the capability boundary of the template itself.

The specification body defines the weekly report as a fixed-structure horizontal slide deck: Cover / Shipped / In flight / Blocked / Metrics / Asks / Thanks, with each slide conveying a distinct category of status information.

next/src/lib/templates/skills/weekly-update/SKILL.md

- Blocked (红色 callout)

The same section lists items like "- Cover (week number + team + one-line theme)", "- Metrics (KPI card grid + week-over-week comparison)", and "- Asks (request checklist)"—the sequence dictates reporting logic: Shipped → In flight → Blocked → Metrics → Asks.

Horizontal scrolling is implemented via CSS scroll-snap: the container uses overflow-x: auto + scroll-snap-type: x mandatory, and each slide uses flex: 0 0 100vw + scroll-snap-align: start.

next/src/lib/templates/skills/weekly-update/example.html

scroll-snap-type: x mandatory;

This provides the foundation for "scrolling without JS"; scripts are solely responsible for indicator dot synchronization and keyboard control.

Keyboard navigation and indicator dots are implemented via an inline script: ArrowRight/PageDown advances forward, ArrowLeft/PageUp moves back, and scrolling synchronizes the active class on dots.

next/src/lib/templates/skills/weekly-update/example.html

document.addEventListener('keydown', (e) => {

The script calculates the current page using Math.round(deck.scrollLeft / window.innerWidth) and flips slides via scrollTo({behavior: 'smooth'}).

The "hash synchronization" declared in the body specification is not implemented in the example: the example contains no location.hash or history-related code.

next/src/lib/templates/skills/weekly-update/SKILL.md

- 键盘左右切换, hash 同步

Grep for hash/location/history in example.html yields zero hits—the example only implements keyboard and dot synchronization. This discrepancy where "specification body > example implementation" has been documented in the audit ledger.

Because each slide is a top-level <section class="slide">, the host recognizes it as a deck and enables export capabilities (PDF / PNG zip / PPTX).

next/src/lib/deck.ts

Cheap test — true if the document looks like a deck (has ≥1

Host comments specify the convention as <section class="slide" data-slide-id="N"> (falling back to a 1-based sequential index if data-slide-id is missing); the example relies on this fallback path.

The CLI side features a direct keyword matching channel: skills-matcher.ts maps keywords in user content directly to this template id; a hit assigns confidence = hit count × 2 + 3, and reaching a threshold of 3 uses local rules directly without prompting the model to select a template.

cli/src/skills-matcher.ts

[["周报", "weekly", "本周", "下周计划", "本周完成"], "weekly-update"],

Keywords such as "周报", "weekly", and "本周完成" directly match this template; the operations scenario signal table also weights "周报/每周/weekly/standup".

Threshold constants used for CLI fallback matching: content length must exceed 60 characters to enable AI summary matching; the strong signal threshold is 3.

cli/src/skills-matcher.ts

const MIN_CONTENT_LENGTH_FOR_AI = 60;

Additionally, SCENARIO_SIGNALS applies weight to keywords based on the template's scenario, and fallbackMatch scores using tags/zhName/description; only if both layers fail is the agent called for summary matching.

The host wrapper renders examples and generated outputs using an iframe with sandbox="allow-scripts allow-same-origin" (allowing scripts and same-origin)—this is a product wrapper trade-off, noted under risks, and does not factor into this skill's security rating.

next/src/components/template-picker.tsx

sandbox="allow-scripts allow-same-origin"

Both preview-pane.tsx and deck-viewer.tsx follow this pattern; inline JS in example HTML executes only during browser preview, and the skill itself executes no scripts.

2Core Capabilities

01Horizontal slide deck (scroll-snap x mandatory, 100vw per slide)

02Fixed weekly report slide templates: Cover/Shipped/In flight/Blocked/Metrics/Asks/Thanks

03Red callout emphasis for blocked items

04Keyboard slide navigation (←/→/PageUp/PageDown)

05Automatic navigation dot generation + scroll synchronization

06Host deck export (PDF / PNG zip / PPTX)

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt directives and rule text, without script execution or external side effects

Audit Notes: Evaluation target: this skill directory (next/src/lib/templates/skills/weekly-update/). File-by-file audit confirms: zero scripts, zero credential access, and zero disk writing; grep within the directory reveals zero http(s) endpoints (no CDN, no external font links); SKILL.md body only specifies layout, styling, and font family names without referencing any runtime external endpoints, qualifying it as a pure directive template = green. Host-side notes (not counted towards rating): The html-anything product wrapper concatenates the body into the prompt via assemblePrompt() and spawns a local agent CLI, injecting cdn.tailwindcss.com + Google Fonts requirements (next/src/lib/templates/shared.ts); the preview iframe utilizes sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).

5Second-Pass Verification

[ok] skill 目录文件清单 — find 得 SKILL.md + example.html，无 scripts/references。
[ok] 外部端点为空 — 对两文件 grep 'https?://' 零命中；head 无 <link>/<script src>，字体走 Inter 系统栈。
[discrepancy] 「hash 同步」是否实现 — SKILL.md 要求「键盘左右切换, hash 同步」，但 example.html 对 hash/location/history grep 零命中；只实现了 keydown（ArrowRight/PageDown/ArrowLeft/PageUp）与 dot 同步。
[ok] 键盘翻页是否实现 — 示例脚本含 ArrowRight/PageDown → deck.scrollTo({left: window.innerWidth * next}) 与 ArrowLeft/PageUp 反向分支。
[ok] 页型与示例页数是否对应 — 示例 8 个 <section class="slide">，覆盖 Cover/Shipped/In flight/Blocked/Metrics/Asks/Thanks 七型 + 收尾，与正文清单一致。
[ok] 宿主 deck 识别与导出 — next/src/lib/deck.ts 注释「Cheap test — true if the document looks like a deck」并按 section.slide 切页；export-menu.tsx 提供 deck-pdf/deck-png-zip/deck-pptx 三个动作。
[ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["周报", "weekly", "本周", "下周计划", "本周完成"], "weekly-update"] 行。
[ok] 判级 green 自证 — 目录零脚本文件（示例内联导航脚本属产物示例）、零凭证、零写盘、零端点 → green。

6Verdict & Scenarios

Structure serves as agenda: Slide sequence standardizes the reporting logic of "Shipped → Blocked → Metrics → Asks", eliminating weekly redesign overhead

Out-of-the-box interactivity: Built on scroll-snap + keyboard/dot navigation without requiring external libraries

Zero external links and zero font requests, fully offline-demonstrable with minimal rendering overhead (tied with team-okrs)

Processable output: Exportable to PDF/PNG zip/PPTX once recognized as a deck by the host

Best for: Ideal for team weekly reports, standup materials, fixed-cadence reporting for operations or engineering teams, and scenarios requiring slide-by-slide presentation with PDF/PPTX export capabilities.

Not for: Not suitable for long-form reading content (horizontal scrolling hinders quick scanning); not suitable for content far exceeding 8 pages that cannot be split; not suitable for single-page print document requirements.

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload weekly-update.tar.gz

sha256: 89e6eddaef5be64f…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.