mcpField
H
html

html

github.com/mathbulletドキュメント175322 回インストール2 週間前に更新
リポジトリ

html について

説明文書を作成するためのHTMLスキルで、ビルドなしでブラウザーに表示できるHTMLの保存方法、構成、スタイルを定めます。図、コード、数式、印刷への対応規則も含みます。

主な機能

  1. 01ブラウザーで直接表示できるHTMLの作成
  2. 02ファイル名と保存先の指定
  3. 03共有デザインシステムへの準拠
  4. 04文書構成と図の規則
  5. 05コードハイライトと数式の設定

活用シーン

  1. 01技術解説文書の作成
  2. 02目次付きHTMLページへの内容整理
  3. 03文書内でのコード・図・数式の提示
  4. 04規則に沿った印刷ページの準備

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mathbullet/skills --skill html

インストール後、Claude Code で/htmlを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

render-pdf.sh
design-system/
component-samples.html
document.css
math-copy.js

詳細

プロジェクトの README より

HTML による説明ドキュメント

文章

説明内容と日本語表現を補うため、次のスキルの併用を推奨する。

  • ja-explainer：論文や記事を日本語で要約・解説する文書の規範
  • japanese-tech-writing：日本語の技術文書、記事、解説文の構成と文章規範
  • cognitive-rhythm-writing：読み物としての緩急が必要な長文の文章規範

いずれも推奨スキルであり、html の必須依存ではない。

成果物

  • HTML を作る
  • ビルドなしでブラウザが直接描画できる状態にする
  • 保存先が指定されている場合は従う。指定がなければ現在の作業ディレクトリへ保存する
  • ファイル名は {yyyymmdd}-{内容を表すケバブケース}.html とする。既存ファイルの更新では名前を変えない
  • 個別の文書管理システム、メタデータ、Viewer、公開先に関する規則は、このスキルを参照する上位スキルの指示に従う

デザインシステム

作成前に design-system/component-samples.html を確認する。コンポーネント集は design-system/document.css、数式コピー機能は design-system/math-copy.js を正とする。

既定では、成果物と一緒に必要なファイルを配置し、次の相対パスで読み込む。上位スキルが共有アセットのパスを指定した場合は、その指定を優先する。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
<link rel="stylesheet" href="./design-system/document.css">
<script src="./design-system/math-copy.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script>document.addEventListener("DOMContentLoaded", () => hljs.highlightAll());</script>

主要規則は次のとおり。

  • 背景は #FAF9F6。部品は白地、黒罫線、角丸を基本とする
  • 自然言語は Ubuntu Sans と Noto Sans JP、コード・URL・日付は Ubuntu Mono を使う
  • 有彩色はリンク青 #2990DA とアクセント赤 #D63A2F に限定する
  • 赤い強調は原則として 1 ページ 1 箇所までとする
  • シンタックスハイライトとコード差分の色は、意味を区別する機能色としてこの制限の対象外とする
  • 余白は上下左右の均衡を保つ
  • 引用は .mb-quote を使い、原文と訳文を同じ文字サイズ・色で上下に並べる
  • .mb-chip は並列の固有名や分類名の列挙にだけ使う
  • 絵文字や矢印文字を図記号として使わない。必要な記号はインライン SVG で描く
  • 表は短い対応関係に使い、3 列までを基本とする
  • 行見出しのセルには .mb-rowlabel を付け、語中の折り返しを防ぐ
  • コード差分は pre.mb-diff を使い、変更理由を散文で説明してから必要な断片を示す
  • ページ固有の <style> は図の配置調整など最小限にとどめる

構成とフォーマット

説明対象に合わせて、並置、図解、タイムライン、要約、折りたたみを使い分ける。 一方向の単純な手順を、必要性なくフローチャートにしない。

基本構成は次の順とする。

  1. 背景と要点
  2. 本論
  3. 具体例
  4. 補足・限界・関連事項

h1 とリード文の後に .mb-toc の目次を置き、各 h2 に対応する id を付ける。

用語リスト

専門用語は本文の初出で定義する。 用語リストは、複数箇所から参照する用語がある場合だけ設ける。 用語リストの位置は文書ごとに変更しない。 ブラウザ幅 1400px 以上では、本文右側の専用欄へ表示する。 ブラウザ幅 1399px 以下では、本文末尾へ表示する。 配置の切り替えは共有 CSS だけが担当し、用語リストによってヘッダー、リード、目次、要約、本文の幅を縮めてはならない。 マークアップは aside.mb-glossary と dl、dt、dd を使う。 正解例は design-system/component-samples.html を参照する。

図

  • .mb-figure は、画像・SVGなどの視覚資料とキャプションを一つにまとめる外枠である。特定の図形や「矢印で結んだ箱」を意味しない
  • .mb-figure-frame は視覚資料の表示面、figcaption は図番号・説明・出所の表示領域として使う
  • 原典に重要な図がある場合は、出所を明示して引用する
  • 原典の図があるのに模倣図を作らない
  • 自作図はインライン SVG とし、アスキーアートを使わない
  • 黒一色の線画を基本とし、.mb-figure-frame に載せる
  • ノード数が多い場合は縦方向を優先する
  • 矢印が交差する構成を避ける
  • 単なる直列手順は番号付きの説明として表現する

コード

  • Highlight.js を必ず読み込み、言語に応じたシンタックスハイライトを適用する
  • pre code には language-javascript、language-python、language-html などの言語クラスを必ず付ける
  • ハイライトしないテキストには language-plaintext を付ける
  • 独自の色付けでコードを装飾せず、document.css の .hljs-* 規則を使う
  • pre.mb-diff code には nohighlight を付け、差分専用の色と行頭記号を使う

数式

  • MathJax 3 を使う
  • インライン数式は $...$、ディスプレイ数式は $$...$$ とする
  • ベクトルと行列は \boldsymbol{...} を使う
  • スカラー、添字、集合名は装飾しない
  • 名前付きの演算は \mathtt{...}、標準 LaTeX コマンドはそのまま使う
  • math-copy.js により、すべての数式から LaTeX 原文をコピーできるようにする
  • ページ側で window.MathJax を再定義しない
  • 未知のコマンドを別記法へ勝手に置換しない

印刷と PDF

印刷対応は document.css の @media print を使う。 PDF 化はユーザーから明示的に依頼された場合だけ render-pdf.sh を実行する。

コメント

Markdown 対応