ドキュメント&知識ベース · nexu-io/html-anything

team-okrs

四半期バナー + 3つの目標 + KR進捗バー + オーナー + ステータスピル

L1 基本 · ソース登録のみV1 コミット固定Dual-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
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

本スキルは実行可能プログラムではなく、html-anythingの「テンプレート」です。SKILL.md + example.html[/example.md] からなるディレクトリであり、実行時に loader.ts がディスク走査して読み込みます。新規テンプレートの追加はディレクトリの追加のみで完了し、TypeScriptコードの変更は不要です。

next/src/lib/templates/loader.ts
Adding a template = adding a folder. No TS code change required; the API
SKILLS_DIR はアプリケーション cwd の src/lib/templates/skills に固定されています。listSkills() は第1階層のサブディレクトリを走査し、isValidBundledId でフィルタリングした上でディレクトリごとに SKILL.md を読み込んで frontmatter を解析するため、「セレクター用メタデータ」と「生成用プロンプト本文」は同一ファイルから生成されます。

frontmatter はセレクター/API向けのメタデータ(zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags)であり、fmToMeta() によって SkillMeta にマッピングされます。frontmatter 以降の本文がモデルに与えられる仕様定義となります。

next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
id はディレクトリ名から取得されます。example のメタデータ(example_id/name/format/tagline/desc/source_url)はディレクトリに example.md/html が存在する場合にのみ SkillExampleMeta として出力され、body は一覧 API から意図的に除外されています(コメント:Body is excluded so we can return the entire registry in one cheap fetch)。

生成時、テンプレート本文はプロンプトの本文として扱われます。/api/convert は assemblePrompt() を使用して「全体デザイン指示 + 本テンプレート本文 + ユーザーコンテンツ」を1つのプロンプトに結合し、ホスト環境のローカル agent CLI に渡して、HTMLを stdout からストリーミング取得します。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同一ルートには editFromHtml/editFromContent による「差分最小化編集」ブランチも存在します。このパイプラインにおいてテンプレート本文は単なる文字列として扱われ、評価や実行は一切行われません。

テンプレート本文の前には共通の先行指示(SHARED_DESIGN_DIRECTIVES)が付与され、技術面およびコンテンツ面の規律が全テンプレートに一律で適用されます。サンプルHTMLに頻出するCDNや外部フォントリンクは、これに起因します(ホスト側のシェルによる注入であり、テンプレート自体の要件ではありません)。

next/src/lib/templates/shared.ts
通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。
テンプレート本文はスタイル、レイアウト、コンポーネントのみを担当し、これらの厳格な要件を重複して規定しません。安全評価はテンプレート自身のディレクトリのみを対象とし、このエンドポイントの挙動はホストシェルの動作として security.reason に記載されています。

生成物は stdout のテキストとして返却されます。全体指示によりエージェントによるファイルシステム操作は明示的に禁止されており、ディスク保存はフロントエンド側が担当します。したがって、テンプレートディレクトリにはスクリプトもディスク書き込み能力も存在しません。

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
元の指示文では「HTMLをいかなる .html ファイルにも書き出さないこと……フロントエンドが stdout のテキストを直接捕捉し、ファイルのディスク保存はフロントエンドが担当する」と規定されています。生成物は最終的にフロントエンドによってタスク履歴に保存・エクスポートされます。

example.html はパッケージに同梱された事前レンダリング済みのサンプルです。/api/templates/<id>/preview は iframe(セレクターのインラインプレビュー)向けに text/html としてそのまま返却し、/api/templates/<id>/example は example.md と example.html を合わせて返却します。

next/src/app/api/templates/[id]/preview/route.ts
return new Response(skill.exampleHtml, {
サンプルはプレビューおよびドキュメント用途に限定されており、プロンプト生成には関与しない(生成には SKILL.md 本文のみを使用する)ため、サンプルの外部リンクがテンプレート自身の能力境界に影響を与えることはありません。

本文は【レイアウト】リストを用いてページを4つのブロックに固定しています:四半期バナー、3つの目標カラム(各カラムにKRのセット)、各KRの進捗バー+数値+オーナー+ステータスピル、右カラムのサマリーです。

next/src/lib/templates/skills/team-okrs/SKILL.md
- 3 个 objectives 列, 每个含一组 KR
同一箇所に「- 各KRにプログレスバー + 数値 + オーナーアバター + ステータスピル」「- 右側に 'this quarter at a glance' サマリー」と続いて記載されており、本文が具体的で実装可能なレイアウトを直接指定することで、モデルによる不要な自由改変を排除しています。

サンプルは仕様を忠実に反映し、3値状態マシンを備えた静的ダッシュボードとして実装されています。KR行には進捗バーとオーナーアバターがあり、ステータスピルには on-track / at-risk / off-track の3色のスキームが適用されています。

next/src/lib/templates/skills/team-okrs/example.html
<span class="pill on-track"><span class="dot"></span>On track</span>
ページのメタ行には「14 October → 31 December 2025 · Owner Devon Park · 3 objectives · 9 key results」と記載されており、本文の「3つの目標」およびサンプル内の9件のKRと完全に一致しています。

サンプルは外部リンクを一切含まない静的ファイルです。<script> タグはなく、head に CDN やフォントのリンクも存在せず、フォントはシステムフォントスタックを使用しているため、ダブルクリックでオフライン表示可能です。

next/src/lib/templates/skills/team-okrs/example.html
--display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
これは外部エンドポイントを持たない直接の証拠です(ディレクトリ内の2ファイルに対して 'https?://' を grep してもヒット件数はゼロです)。

CLI側にはキーワードによる直接マッチング機能が存在します。skills-matcher.ts がユーザーコンテンツ内のキーワードを本テンプレート id に直接マッピングし、一致した場合は confidence=一致数×2+3 を付与します。閾値の 3 に達した場合はローカルルールが適用され、モデルによるテンプレート選択はスキップされます。

cli/src/skills-matcher.ts
[["OKR", "KR", "关键结果", "objectives", "季度目标", "key results"], "team-okrs"],
OKR、KR、キーリザルトなどの単語に一致するとローカルで team-okrs に直接マッピングされます(テスト cli/src/__tests__/skills-matcher.test.ts で「matches OKR content to team-okrs」をアサート)。

CLIのフォールバックマッチングで使用される閾値定数:コンテンツ長が60文字を超えている場合のみAIサマリーマッチングが有効化されます。強力シグナルの閾値は3です。

cli/src/skills-matcher.ts
const MIN_CONTENT_LENGTH_FOR_AI = 60;
さらに SCENARIO_SIGNALS がテンプレートの scenario に基づいてキーワードを加重評価し、fallbackMatch が tags、zhName、description を用いてスコアリングを行います。これら2つのレイヤーが両方失敗した場合にのみ、エージェントを呼び出してサマリーマッチングを実行します。

ホストシェルは sandbox="allow-scripts allow-same-origin" を指定した iframe を使用してサンプルや生成物をレンダリングします(スクリプトおよび同一オリジンを許可)。これは製品シェルの設計上の選択であり、リスクとして記載されていますが、本スキルの評価には影響しません。

next/src/components/template-picker.tsx
sandbox="allow-scripts allow-same-origin"
preview-pane.tsx / deck-viewer.tsx も同様の構成です。サンプルHTML内のインラインJSはブラウザプレビュー時にのみ実行され、スキル自体はいかなるスクリプトも実行しません。

2コア機能

01四半期バナー(Q? + テーマ)
023つの目標(Objectives)カラム(各カラムにKRグループ)
03各KR:進捗バー + 数値 + オーナーアバター + ステータスピル
043値のステータススタイル(on track / at risk / off track)
05右カラムの「This quarter at a glance」サマリー
06依存関係ゼロの静的レンダリング(JS不要、外部フォント不要)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: 純粋なプロンプト指示およびルール定義テキストのみで構成され、スクリプト実行や外部への副作用は一切なし
監査ノート: 評価対象=本スキルディレクトリ(next/src/lib/templates/skills/team-okrs/)。全ファイルを精査:スクリプトなし、認証情報読み取りなし、ディスク書き込みなし。ディレクトリ内の全ファイルに対し grep を実行しても http(s) エンドポイントは一切検出されず(CDN・外部フォントリンクなし)、SKILL.md 本文もレイアウト、スタイル、フォントファミリー名の定義にとどまり、実行時の外部インターフェースへのアクセス要求もないため、純粋なプロンプト指示テンプレート(green)と判定。ホスト側の補足(判定対象外):html-anything の製品シェルは assemblePrompt() 経由で本文をプロンプトに結合してローカル agent CLI を起動し、cdn.tailwindcss.com や Google Fonts の読み込み指示を注入します(next/src/lib/templates/shared.ts)。また、プレビュー用 iframe は sandbox="allow-scripts allow-same-origin" を使用します(next/src/components/template-picker.tsx)。

5二重目の独立検証

  • [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」。

6結論

  • 仕様とサンプルの完全な整合性:本文の4つのレイアウト要件がサンプルで余すところなく具現化(バナー / 3つの目標 / KR行の3点セット / 右カラムのサマリー)
  • 直感的なステータスセマンティクス:3値ピルが進捗の健全性を視覚的にレイアウトへ落とし込み、閲覧者が一目で状況を把握可能
  • 完全な外部依存なし・スクリプトなし:オフラインでのダブルクリック表示や一括スクリーンショットに対応し、レンダリング負荷が極小
  • セレクターとCLIのデュアルアクセス:メタデータによる一覧分類とキーワードの強力シグナルによるダイレクトマッチング
  • 最適な用途: プロダクトやチームの四半期レビューページ、OKR進捗ダッシュボード、意思決定者が一目で進捗を確認できる社内向けドキュメントに最適。ダッシュボード系ページのベースとしても有用です。
    不向きな用途: インタラクティブなフィルタリングやドリルダウンが必要な動的ダッシュボードには不向き(データバインディングのない静的シングルページのため)。社外向けのマーケティングページには不向き(社内レポート向けの情報構造であるため)。
    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
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.