Docs & Knowledge · nexu-io/html-anything

team-okrs

Name: team-okrs
Author: nexu-io/html-anything

Quarterly banner + 3 objectives + KR progress bars + owner + status pill

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 a template for html-anything: a directory (SKILL.md + example.html[/example.md]) scanned and read from disk at runtime by loader.ts—adding a template merely means adding a directory, without modifying any TypeScript code.

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 application cwd; listSkills() traverses top-level subdirectories, filters them via isValidBundledId, and reads SKILL.md directory by directory to parse frontmatter, meaning selector metadata and prompt body for generation originate from the exact same file.

Frontmatter serves as metadata for the selector/API (zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags), mapped into SkillMeta by fmToMeta(); the body following the frontmatter constitutes the actual specification provided to the model.

next/src/lib/templates/loader.ts

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

id is derived from the directory name; example metadata (example_id/name/format/tagline/desc/source_url) generates SkillExampleMeta only when the directory contains example.md/html, and body is deliberately excluded from the list API (comment: 'Body is excluded so we can return the entire registry in one cheap fetch').

During generation, the template body serves as the prompt body: /api/convert uses assemblePrompt() to concatenate 'global design directives + this template body + user content' into a single prompt, passes it to the host's local agent CLI, and streams back the HTML captured from stdout.

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

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

The same route provides editFromHtml/editFromContent branches for minimal-diff editing; across this pipeline, the template body remains purely a string without evaluation or execution.

Above the template body sits a set of global prefix instructions (SHARED_DESIGN_DIRECTIVES) that uniformly enforce technical and content discipline across every template—the external CDN and font links commonly seen in example HTML originate here (injected by the host wrapper, not required by the template itself).

next/src/lib/templates/shared.ts

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

The template body only governs style, layout, and components without repeating these hard requirements; rating assessment evaluates only the template directory itself, while this endpoint behavior belongs to the host wrapper and is documented under security.reason.

Output is returned as stdout text: global directives explicitly prohibit the agent from accessing the file system, leaving persistence to the front end—thus the template directory has 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 files... The front end captures your stdout text directly, and disk persistence is handled by the front end'; the final artifact is written to task records and exported by the front end.

example.html is a pre-rendered example bundled within the package: /api/templates/<id>/preview returns it as text/html directly to an 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 strictly for preview and documentation without participating in prompt generation (generation uses only the SKILL.md body), so its external links do not affect the skill's capability boundary.

The body fixes the page into four sections using a [Layout] list: a quarterly banner, 3 objective columns (each with a set of KRs), KR progress bar + value + owner + status pill for each entry, and a right-hand summary column.

next/src/lib/templates/skills/team-okrs/SKILL.md

- 3 个 objectives 列, 每个含一组 KR

The same section specifies '- each KR has a progress bar + value + owner avatar + status pill' and '- right-hand "this quarter at a glance" summary'—the body provides a concrete, implementable layout, leaving no room for arbitrary model improvisation.

The example realizes the specification as a static board with a tri-state state machine: KR rows include progress bars and owner avatars, and status pills feature three color schemes for on-track, at-risk, and off-track.

next/src/lib/templates/skills/team-okrs/example.html

<span class="pill on-track"><span class="dot"></span>On track</span>

The page meta line states '14 October → 31 December 2025 · Owner Devon Park · 3 objectives · 9 key results', which aligns with the body's '3 objectives' and the 9 KRs in the example.

The example is a zero-external-link static file: no <script> tags, no CDN or font links in the head, uses system font stacks, and can be opened offline with a double-click.

next/src/lib/templates/skills/team-okrs/example.html

--display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

This provides direct evidence that its endpoint surface is completely empty (grepping for 'https?://' across both files in the directory yields zero matches).

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 the threshold of 3 triggers local rules without asking the model to select a template.

cli/src/skills-matcher.ts

[["OKR", "KR", "关键结果", "objectives", "季度目标", "key results"], "team-okrs"],

Matching keywords such as OKR, KR, or key results directly routes locally to team-okrs (the test cli/src/__tests__/skills-matcher.test.ts asserts 'matches OKR content to team-okrs').

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 weights keywords according to the template scenario, and fallbackMatch scores using tags, zhName, and description; the agent is called for summary matching only if both layers fail.

The host wrapper renders examples and artifacts inside an iframe with sandbox="allow-scripts allow-same-origin" (allowing scripts and same-origin)—this is an architectural trade-off of the product shell noted under risks and does not affect this skill's safety rating.

next/src/components/template-picker.tsx

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

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

2Core Capabilities

01Quarterly banner (Q? + theme)

023 objective columns, each containing a group of KRs

03Per KR: progress bar + value + owner avatar + status pill

04Tri-state status styling (on track / at risk / off track)

05Right-hand 'This quarter at a glance' summary

06Zero-dependency static rendering (no JS, no external fonts)

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: Target evaluated: this skill directory (next/src/lib/templates/skills/team-okrs/). Verified file by file: zero scripts, zero credential access, zero disk writes; grepping inside the directory finds zero http(s) endpoints (no CDN, no external font links); the SKILL.md body only defines layout, style, and font family names without referencing any runtime external interfaces, making it a pure directive template (green). Host wrapper context (not counted toward rating): the html-anything product shell concatenates the body into the prompt via assemblePrompt(), spawns a local agent CLI, injects cdn.tailwindcss.com + Google Fonts requirements (next/src/lib/templates/shared.ts), and renders the preview iframe using 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] external_deps 为空 — 对两文件 grep 'https?://' 零命中；head 无 <link>、无 <script src>。
[ok] 无脚本执行 — grep -c "<script" example.html = 0；SKILL.md 无任何命令行/脚本指令。
[ok] frontmatter 字段与 loader 白名单对齐 — name/zh_name/en_name/emoji/description/category/scenario/aspect_hint/tags 全在 SkillFrontmatter 类型内，可被 parseFrontmatter 正确解析。
[ok] 「3 个 objectives」与示例一致 — 示例 meta 行自述 3 objectives · 9 key results，页面含 9 条 KR（.kr 计数 9）。
[ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["OKR", "KR", "关键结果", "objectives", "季度目标", "key results"], "team-okrs"] 行；测试 skills-matcher.test.ts 断言匹配到 team-okrs。
[ok] 判级 green 自证 — 目录零脚本/零凭证/零写盘、无端点；宿主壳的 Tailwind/字体注入与 iframe sandbox 均写在 reason 说明中，不计档。
[ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「季度 banner + 3 个目标 + KR 进度条 + owner + 状态 pill」。

6Verdict & Scenarios

Specification aligns directly with the example: all 4 layout items in the body are reflected in the example (banner / 3 objectives / KR row triad / right-hand glance)

Actionable status semantics: tri-state pills encode progress health into the layout, enabling at-a-glance status recognition

Zero external links and zero scripts: supports offline double-click opening, batch screenshotting, and minimal rendering overhead

Dual-channel discoverability via selector and CLI: metadata grouping + direct routing on strong keyword signals

Best for: Ideal for product or team quarterly review pages, OKR progress dashboards, and internal pages where decision-makers need progress at a glance; also suitable as a starting point for dashboard-style layouts.

Not for: Not suitable for dynamic dashboards requiring interactive filtering or drill-downs (this template is a static single page with no data binding); not suitable for external-facing marketing pages (the information hierarchy is tailored for internal reports).

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload team-okrs.tar.gz

sha256: fe13926b690c2c2a…

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.