デザイン&モーション · nexu-io/html-anything

weekly-update

6-8ページの横スクロール週報:リリース済み / 進行中 / ブロッカー / 指標 / 支援要請

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仕組みと動作原理

本skillは実行可能プログラムではなく、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を読み取りフロントマターを解析します。そのため、「セレクター用メタデータ」と「生成用プロンプト本文」は同一ファイルから生成されます。

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

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として生成されます。本文は一覧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テキストとして返却されます。グローバル指示によりagentによるファイルシステム操作は明示的に禁止されており、ディスクへの保存はフロントエンドが担当します。そのため、テンプレートディレクトリにはスクリプトもディスク書き込み能力も存在しません。

next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
原文の補足文では「HTMLをいかなる.htmlファイルにも書き込まないこと……フロントエンドがstdoutテキストを直接キャプチャし、ファイル保存はフロントエンドが担当する」と要求されています。生成物は最終的にフロントエンドによってタスクログへの記録およびエクスポートが行われます。

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

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

本文仕様では、週報をCover / Shipped / In flight / Blocked / Metrics / Asks / Thanksという固定構造の横スクロールデッキとして定義しており、各スライドが固有のステータス情報を担当します。

next/src/lib/templates/skills/weekly-update/SKILL.md
- Blocked (红色 callout)
同セクションには「- Cover (週数 + チーム + 1行テーマ)」「- Metrics (KPIカードグリッド + 前週比)」「- Asks (支援要請リスト)」などが列挙されています。この順序がそのまま報告ロジック(成果 → 進行中 → ブロッカー → 指標 → 要請)を構成します。

横スクロールはCSSのscroll-snapによって実現されています。コンテナにはoverflow-x: auto + scroll-snap-type: x mandatoryが、各スライドにはflex: 0 0 100vw + scroll-snap-align: startが適用されています。

next/src/lib/templates/skills/weekly-update/example.html
scroll-snap-type: x mandatory;
これが「JavaScriptなしでもスクロール可能」な基盤となっています。スクリプトはナビゲーション用ドットの同期とキーボード制御のみを担当します。

キーボードによる左右切り替えとインジケータードットはインラインスクリプトによって実装されています。ArrowRight/PageDownで進み、ArrowLeft/PageUpで戻り、スクロール時にドットのactiveクラスが同期されます。

next/src/lib/templates/skills/weekly-update/example.html
document.addEventListener('keydown', (e) => {
スクリプトはMath.round(deck.scrollLeft / window.innerWidth)で現在ページを逆算し、scrollTo({behavior: 'smooth'})でページを切り替えます。

本文で宣言されている「hash同期」はサンプル内では実装されていません。サンプルにはlocation.hashやhistoryに関連するコードは含まれていません。

next/src/lib/templates/skills/weekly-update/SKILL.md
- 键盘左右切换, hash 同步
example.html内をhash/location/historyでgrepしても一致件数はゼロです。サンプルではキーボードとドットの同期のみが実装されています。この「本文仕様 > サンプル実装」のギャップは確認表に記録されています。

各スライドがトップレベルの<section class="slide">であるため、ホストはこれをデッキとして認識し、エクスポート機能(PDF / PNG zip / PPTX)を追加します。

next/src/lib/deck.ts
Cheap test — true if the document looks like a deck (has ≥1
ホスト側のコメントには<section class="slide" data-slide-id="N">という規約が明記されています(data-slide-idが存在しない場合は1始まりのインデックスへフォールバック)。サンプルはこのフォールバックパスに該当します。

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

cli/src/skills-matcher.ts
[["周报", "weekly", "本周", "下周计划", "本周完成"], "weekly-update"],
「周报」「weekly」「本周完成」などの単語はこのテンプレートに直接マッチします。また、operationsシナリオのシグナル表にも「周报/每周/weekly/standup」の重み付けが含まれています。

CLIのフォールバックマッチングで使用される閾値定数:AI要約マッチングを有効化するにはコンテンツ長が60文字を超えている必要があり、強シグナルの閾値は3です。

cli/src/skills-matcher.ts
const MIN_CONTENT_LENGTH_FOR_AI = 60;
さらにSCENARIO_SIGNALSがテンプレートのscenarioに基づいてキーワードに重み付けを行い、fallbackMatchがtags/zhName/descriptionを用いてスコアリングします。両レイヤーが不一致となった場合のみ、agentを呼び出して要約マッチングを実行します。

ホストシェルはsandbox="allow-scripts allow-same-origin"(スクリプト実行許可、同一オリジン許可)を指定したiframeを用いてサンプルや生成物をレンダリングします。これは製品シェル側の設計判断であり、リスクとして記載されていますが、本skill自体のセキュリティ格付けには影響しません。

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

2コア機能

01横スクロールデッキ(scroll-snap x mandatory、各スライド 100vw)
02固定週報スライド構成:Cover/Shipped/In flight/Blocked/Metrics/Asks/Thanks
03ブロッカー項目の赤色コールアウト強調
04キーボードによるページ送り(←/→/PageUp/PageDown)
05インジケータードットの自動生成 + スクロール同期
06ホスト側デッキエクスポート(PDF / PNG zip / PPTX)

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: スクリプト実行や外部への副作用を含まない、純粋なプロンプト指示およびルールテキスト
監査ノート: 評価対象:本skillディレクトリ(next/src/lib/templates/skills/weekly-update/)。ファイルごとの確認結果:スクリプトなし、認証情報の読み取りなし、ディスク書き込みなし。ディレクトリ内に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] 外部端点为空 — 对两文件 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。

6結論

  • 構造がそのままアジェンダに:「成果 → ブロッカー → 指標 → 要請」の報告ロジックが固定化されており、毎週のデザイン再設計コストを削減
  • 導入後すぐに使えるインタラクション:scroll-snapを基盤とし、外部ライブラリ不要でキーボード/ドットナビゲーションに対応
  • 外部リクエストおよび外部フォント呼び出しゼロ、完全オフラインで実演可能、レンダリング負荷が最小限(team-okrsと同等水準)
  • 再加工可能な出力:ホストにデッキとして認識された後、PDF/PNG zip/PPTXへのエクスポートが可能
  • 最適な用途: チームの週報やスタンドアップ用資料、運用チームやエンジニアリングチームの定期報告、スライド形式でプレゼンしつつPDF/PPTXとしてエクスポートする必要があるシナリオに最適です。
    不向きな用途: 長文の読み物系コンテンツ(横スクロールは一覧性に不向き)、8ページを大幅に超過し分割も受け入れられないシナリオ、1ページの印刷用ドキュメントとしての出力が求められる用途には不向きです。
    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
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.