Update to AI Review Skills

{
  "name": "html",
  "description": "Explicitly invoked only. 概念・仕組み・調査内容をHTMLで説明する。通常回答やMarkdown依頼では自動実行しない。",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 240
    },
    {
      "relative_path": "design-system/component-samples.html",
      "size_in_bytes": 11990
    },
    {
      "relative_path": "design-system/document.css",
      "size_in_bytes": 13340
    },
    {
      "relative_path": "design-system/math-copy.js",
      "size_in_bytes": 1764
    },
    {
      "relative_path": "render-pdf.sh",
      "size_in_bytes": 1439
    }
  ],
  "skill_md_contents": "---\nname: html\ndescription: Explicitly invoked only. 概念・仕組み・調査内容をHTMLで説明する。通常回答やMarkdown依頼では自動実行しない。\n---\n\n# HTML による説明ドキュメント\n\n明示指定時だけ実行する。最初に `../../references/runtime-capabilities.md` を読み、実際の能力を確認する。\n\n## 文章\n\n説明内容と日本語表現を補うため、次のスキルの併用を推奨する。\n\n- `explain`：概念や仕組みを説明するときの用語定義、説明の粒度、構成\n- [`japanese-tech-writing`](https://gist.github.com/k16shikano/fd287c3133457c4fd8f5601d34aa817d)：日本語の技術文書、記事、解説文の構成と文章規範\n- [`cognitive-rhythm-writing`](https://gist.github.com/k16shikano/eb2929f13ed19c97188393d297be8432)：読み物としての緩急が必要な長文の文章規範\n\nいずれも推奨スキルであり、`html` の必須依存ではない。\n\n## 成果物\n\n- HTML を作る\n- ビルドなしでブラウザが直接描画できる状態にする\n- 保存先が指定されている場合は従う。指定がなければ現在の作業ディレクトリへ保存する\n- ファイル名は `{yyyymmdd}-{内容を表すケバブケース}.html` とする。既存ファイルの更新では名前を変えない\n- 個別の文書管理システム、メタデータ、Viewer、公開先に関する規則は、このスキルを参照する上位スキルの指示に従う\n\nWork Local / Work Cloud / 不明環境ではCSSと最小JSをインライン化し、利用可能な画像をdata URIにした単一HTMLを既定とし、CDNを必須にしない。Codex Localでは共有CSS/JS/相対画像を再利用でき、要求時は単一HTMLも作る。方式と制約を成果物に記録する。\n\n## デザインシステム\n\n作成前に `design-system/component-samples.html` を確認する。コンポーネント集は `design-system/document.css`、数式コピー機能は `design-system/math-copy.js` を正とする。\n\n既定では、成果物と一緒に必要なファイルを配置し、次の相対パスで読み込む。上位スキルが共有アセットのパスを指定した場合は、その指定を優先する。\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Ubuntu+Sans:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"./design-system/document.css\">\n<script src=\"./design-system/math-copy.js\"></script>\n<script async src=\"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\"></script>\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js\"></script>\n<script>document.addEventListener(\"DOMContentLoaded\", () => hljs.highlightAll());</script>\n```\n\n主要規則は次のとおり。\n\n- 背景は `#FAF9F6`。部品は白地、黒罫線、角丸を基本とする\n- 自然言語は Ubuntu Sans と Noto Sans JP、コード・URL・日付は Ubuntu Mono を使う\n- 有彩色はリンク青 `#2990DA` とアクセント赤 `#D63A2F` に限定する\n- 赤い強調は原則として 1 ページ 1 箇所までとする\n- シンタックスハイライトとコード差分の色は、意味を区別する機能色としてこの制限の対象外とする\n- 余白は上下左右の均衡を保つ\n- 引用は `.mb-quote` を使い、原文と訳文を同じ文字サイズ・色で上下に並べる\n- `.mb-chip` は並列の固有名や分類名の列挙にだけ使う\n- 絵文字や矢印文字を図記号として使わない。必要な記号はインライン SVG で描く\n- 表は短い対応関係に使い、3 列までを基本とする\n- 行見出しのセルには `.mb-rowlabel` を付け、語中の折り返しを防ぐ\n- コード差分は `pre.mb-diff` を使い、変更理由を散文で説明してから必要な断片を示す\n- ページ固有の `<style>` は図の配置調整など最小限にとどめる\n\n## 構成とフォーマット\n\n説明対象に合わせて、並置、図解、タイムライン、要約、折りたたみを使い分ける。\n一方向の単純な手順を、必要性なくフローチャートにしない。\n\n基本構成は次の順とする。\n\n1. 背景と要点\n2. 本論\n3. 具体例\n4. 補足・限界・関連事項\n\nh1 とリード文の後に `.mb-toc` の目次を置き、各 h2 に対応する `id` を付ける。\n\n### 用語リスト\n\n専門用語は本文の初出で定義する。\n用語リストは、複数箇所から参照する用語がある場合だけ設ける。\n用語リストの位置は文書ごとに変更しない。\nブラウザ幅 1400px 以上では、本文右側の専用欄へ表示する。\nブラウザ幅 1399px 以下では、本文末尾へ表示する。\n配置の切り替えは共有 CSS だけが担当し、用語リストによってヘッダー、リード、目次、要約、本文の幅を縮めてはならない。\nマークアップは `aside.mb-glossary` と `dl`、`dt`、`dd` を使う。\n正解例は `design-system/component-samples.html` を参照する。\n\n## 図\n\n- `.mb-figure` は、画像・SVGなどの視覚資料とキャプションを一つにまとめる外枠である。特定の図形や「矢印で結んだ箱」を意味しない\n- `.mb-figure-frame` は視覚資料の表示面、`figcaption` は図番号・説明・出所の表示領域として使う\n- 原典に重要な図がある場合は、出所を明示して引用する\n- 原典の図があるのに模倣図を作らない\n- 自作図はインライン SVG とし、アスキーアートを使わない\n- 黒一色の線画を基本とし、`.mb-figure-frame` に載せる\n- ノード数が多い場合は縦方向を優先する\n- 矢印が交差する構成を避ける\n- 単なる直列手順は番号付きの説明として表現する\n\n## コード\n\n- Highlight.js を必ず読み込み、言語に応じたシンタックスハイライトを適用する\n- `pre code` には `language-javascript`、`language-python`、`language-html` などの言語クラスを必ず付ける\n- ハイライトしないテキストには `language-plaintext` を付ける\n- 独自の色付けでコードを装飾せず、`document.css` の `.hljs-*` 規則を使う\n- `pre.mb-diff code` には `nohighlight` を付け、差分専用の色と行頭記号を使う\n\n## 数式\n\n- MathJax 3 を使う\n- インライン数式は `$...$`、ディスプレイ数式は `$$...$$` とする\n- ベクトルと行列は `\\boldsymbol{...}` を使う\n- スカラー、添字、集合名は装飾しない\n- 名前付きの演算は `\\mathtt{...}`、標準 LaTeX コマンドはそのまま使う\n- `math-copy.js` により、すべての数式から LaTeX 原文をコピーできるようにする\n- ページ側で `window.MathJax` を再定義しない\n- 未知のコマンドを別記法へ勝手に置換しない\n\n## 印刷と PDF\n\n印刷対応は `document.css` の `@media print` を使う。\nPDF 化はユーザーから明示的に依頼された場合だけ `render-pdf.sh` を実行する。\n"
}