1仕組みと動作原理
リアリズムはハードコードされた一連の macOS 数値によるものです：角丸 14px、すりガラス調 rgba(245,245,247,0.78) + backdrop-filter blur(40px) saturate(180%)、1px ボーダー + 上部ハイライト + 二重シャドウなど、すべてそのまま流用可能なパラメータです。
next/src/lib/templates/skills/frame-macos-notification/SKILL.md
- 背景: **frosted glass** 效果 — `background: rgba(245,245,247,0.78)` + `backdrop-filter: blur(40px) saturate(180%)`; 暗色版 `rgba(28,28,30,0.78)`。
テンプレートが提供するのは「macOS っぽい」といった形容詞ではなく数値表です。モデルはパラメータをそのまま写すだけで Big Sur のルックアンドフィールを再現できるため、スクリーンショット素材が一切不要になります。
アプリアイコンは純粋な CSS グラデーション + Unicode 絵文字/モノグラムで描画され、本文では外部リンク画像の利用が明示的に禁止されています。
next/src/lib/templates/skills/frame-macos-notification/SKILL.md
- 左侧: **App icon** (44×44, 圆角 10px, CSS gradient + 1 个 emoji 或 monogram 字母, **不用外链图片**)。
サンプルの 3 つのアイコンはそれぞれ linear-gradient(#1DB954→#0d7a35)、(#0f0f12→#2a2a35)、(#ff7849→#d97757) + 絵文字/モノグラムで構成されており、画像リクエストはゼロです。
スライドインの登場アニメーションとアクセシビリティのフォールバックが対で明記されています（200ms ease-out、prefers-reduced-motion による無効化が可能）。
next/src/lib/templates/skills/frame-macos-notification/SKILL.md
- 入场动效: 从屏幕外右侧滑入 `transform: translateX(110%)→0`, 200ms ease-out; 可被 `prefers-reduced-motion` 关闭。
両者が同時に記述されていることは「使いやすさを犠牲にしないビジュアル」のアプローチであり、このテンプレート群の中でも細部の規律が優れたサンプルです。
テンプレート本体がプロンプトそのものです：SKILL.md 本文がローダーによって読み込まれ、共有プレアンブルおよびユーザーコンテンツと結合されて、ローカルの agent CLI に渡され実行されます。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
実行時にテンプレートディレクトリ内のコードは実行されません：/api/convert は {agent, templateId, content} のみを受け取り、loadSkill(templateId) で SKILL.md 本文を取得してプロンプトの主体とし、ローカルでログイン済みの agent CLI に渡します。HTML は stdout を介してフロントエンドにストリーミングされます。
skill ディレクトリは純粋なテキストアセットです：ローダーがディスクから SKILL.md 本文を読み取るのみで、ディレクトリ内の実行可能コードがロードされることはありません。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
ファイルシステム上の skill は単なるテキストです：ローダーはディレクトリごとに SKILL.md を読み込み、frontmatter をピッカーのメタデータとして抽出し、本文を body として返します。本テンプレートディレクトリ内のモジュールが import または実行されることはありません。
共有プレアンブルがテンプレートより先に注入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツによって決定される」というルールを最優先事項として設定します。
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
共有プレアンブルはテンプレート本文の前に注入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツによって決定される」と定めています。そのため、本テンプレートのレイアウト一覧は「再利用可能なレイアウトプール」であり、ページ数やフレーム数の上限ではありません。
共有プレアンブルがテンプレートより先に注入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツによって決定される」というルールを最優先事項として設定します。
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
プレアンブルはファイルシステムツールの使用を明示的に禁止し、純粋な HTML をレスポンス本文からストリーミング出力することを要求します。ディスクへの保存はフロントエンド側が担当するため、skill 側でのディスク書き込み動作は発生しません。
skill ディレクトリは純粋なテキストアセットです：ローダーがディスクから SKILL.md 本文を読み取るのみで、ディレクトリ内の実行可能コードがロードされることはありません。
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
ディレクトリ内の example.html はリポジトリと共に配布されるゴールデンサンプルであり、プレビュー用ルートがディスクから直接読み込んで返します（ビルドやコンパイルは不要）。品質基準であると同時に詳細ページ用のアセットとしても機能します。
2コア機能
01すりガラス通知バナー（ライト/ダークの 2 系統の配色）
02CSS 描画のアプリアイコン（グラデーション + 絵文字/モノグラム、外部リンク画像禁止）
03複数通知のスタック縮小表示（scale 0.96/0.92 + 段階的な透明度低下）
04右側のアクションボタン（Open/Reply カプセルボタン）
05デュアルキャンバス用途：1920×1080 のコーナー重ね合わせ / 480×120 の独立バナー
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプトの実行や外部への影響はありません。
監査ノート： 🟢 グリーン（安全）。判定対象＝skill ディレクトリ自体：ディレクトリ内に登場する URL は https://cdn.tailwindcss.com、https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap、https://hyperframes.heygen.com/catalog のみであり、すべて example.html（出力サンプル）または frontmatter の出典表記内に限られ、SKILL.md 本文中に実行時外部通信を要求する箇所は一切ありません。ディレクトリ内には SKILL.md、example.html、example.md のみが存在し、スクリプト、実行可能コード、ネットワークエンドポイント、認証情報の読み取り、ディスク書き込み命令はゼロです。SKILL.md に従って実行した結果はホストモデルが HTML テキストを出力するのみであり、外部送信やディスク保存のアクションは含まれません。ホストシェルや出力の利用側の挙動は評価区分の根拠とはせず、verdict.risks にのみ記録します：shared.ts プレアンブルが出力物に対して Tailwind CDN (https://cdn.tailwindcss.com) と Google Fonts の参照を要求している点、runtime がログイン済みのローカル agent CLI を spawn する点（envFor が process.env を透過）、プレビュー用 iframe に sandbox="allow-scripts allow-same-origin" が設定されている点など。
5二重目の独立検証
- [discrepancy] 规范↔示例：横幅尺寸 — 正文写 `480×120 (或更长 480×180 含正文)`，示例实际是 w-[420px] p-3 的三张 420px 宽横幅（含标题 + 双行正文后高度超出 120px）——示例未按自身规范出图，模型同时看到两份口径。
- [discrepancy] 规范↔示例：入场动效时长 — 正文写 `200ms ease-out`，示例是 `animation: slideIn .4s ease-out`（400ms）。
- [ok] 规范↔示例：磨砂/图标/堆叠/按钮 — rgba(28,28,30,0.78) + backdrop-filter blur(40px) saturate(180%)、-webkit- 前缀、CSS gradient 图标、scale 0.96/0.92 堆叠、Open 胶囊按钮均在 example.html 命中，与正文一致。
- [ok] example.md 与 example.html 一致性 — example.md 的 App/Title/Body/Time 与二级通知（Cursor/Spotify）逐条对应示例中的三张横幅。
- [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html、example.md；无 scripts/、无 references/、无数据文件、无包管理器清单。
- [ok] 可执行代码普查 — example.html 内 <script> 计数 = 1，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
- [ok] 外链端点普查 — 目录内 URL：https://cdn.tailwindcss.com、https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap、https://hyperframes.heygen.com/catalog（皆为 example.html 产物示例或 frontmatter 出处标注；正文未要求运行期外发）
- [ok] official_desc 逐字核对 — meta.official_desc 与 SKILL.md frontmatter 的 description 逐字一致。
6結論
最適な用途： 製品リリースの予告、動画の隅のオーバーレイ、SNS 向けの通知風アイキャッチ画像。画像アセットを使わずに「一目で macOS とわかる」リアリズムが求められる場合に最適です。html-anything の動画/エクスポートパイプラインと組み合わせて使用する場合、テンプレート本文がレイアウトを提供し、モデルはアプリ名/タイトル/本文のみを埋める形で動作します。
不向きな用途： 実際の通知システムとの連携やクリック可能なインタラクションが必要な用途（出力は静的ビジュアルです）、A4/印刷用途（キャンバスは 16:9 または横長バナー）、CDN 参照を手動で置き換えることなく完全オフライン・外部通信ゼロが必須の環境。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload frame-macos-notification.tar.gz
sha256:
Option B · Copy Guide for Agentf9ec98ded8bf2d96…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.