菜单
分析・比較・調査結果・進捗・計画を、意思決定しやすい自己完結 HTML レポートとして生成する。 「HTML レポート作って」「レポートにまとめて」「比較を可視化」「グラフで見せて」「ガントチャート作って」 「ダッシュボード風にまとめて」「見やすくまとめて」で使用。 データと伝えたい関係に応じて KPI・表・bar・line・scatter・heatmap・waterfall・donut・radar・gantt から適切な表現を選び、アクセシブル・レスポンシブ・印刷対応の単一 HTML ファイルを生成する。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Fandhe-AI/fandhe-backend --skill create-html-report命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | create-html-report |
| description | 分析・比較・調査結果・進捗・計画を、意思決定しやすい自己完結 HTML レポートとして生成する。 「HTML レポート作って」「レポートにまとめて」「比較を可視化」「グラフで見せて」「ガントチャート作って」 「ダッシュボード風にまとめて」「見やすくまとめて」で使用。 データと伝えたい関係に応じて KPI・表・bar・line・scatter・heatmap・waterfall・donut・radar・gantt から適切な表現を選び、アクセシブル・レスポンシブ・印刷対応の単一 HTML ファイルを生成する。 |
| model | sonnet |
| user-invocable | true |
| argument-hint | <レポートの目的・対象・データ/ファイル> [--interactive] [--output <path>] |
| tools | ["Bash","Read","Write"] |
$ARGUMENTS をもとに、分析結果を「読むだけで要点が分かり、必要なら詳細まで確認できる」自己完結 HTML レポートへ変換する。
最終成果物は原則として単一 .html ファイルとする。
引数でレポート化したい内容（比較対象・データ・目的）を渡す。引数が曖昧な場合は Step 1 でユーザーに確認する。
_/reports/<report-name>.html--interactive 指定時、または静的表示では扱いにくい大量データの場合のみ inline JavaScript を許可する--output <path> で出力先を明示指定できる必ず以下を満たす。
<a href="https://..."> は外部依存とみなさない。ページロード時に外部通信してはならない。会話・引数・指定ファイル・既存データから以下を特定する。
会話や既存データから十分推定できる場合は質問しない。情報不足でも有用な部分レポートを作れる場合は、勝手に値を補完せず「制約・不足情報」として明示して進める。正しいレポートを作れないほど目的・入力が曖昧な場合だけ最小限の確認を行う。
HTML を書く前に内部的に次を整理する。
情報階層は原則次の順序にする。
すべてを1画面のダッシュボードへ押し込まない。重要情報を上に置き、詳細は下へ続ける。
renderer が対応する chart type は bar / line / scatter / heatmap / waterfall / donut / radar / gantt の8種のみ。chart type ありきで選ばず、伝えたい関係から選定する。
| 伝えたい関係 | chart type | 補足 |
|---|---|---|
| カテゴリ間の大きさ・順位比較 | bar | 横棒推奨、0起点の軸 |
| 時系列の傾向・推移 | line | 欠損は gap として表現、架空補完しない |
| 2変数の相関 | scatter | 相関の説明は annotation で補足 |
| 期間ごとの量・時間×カテゴリの分布 | heatmap | 連続値は知覚的に均一な配色を使う |
| 増減への寄与・累積変化 | waterfall | 開始値・終了値・差分を明示 |
| part-to-whole（構成比） | donut | 6分割以下、正確な値は表を併記 |
| 多変量プロフィール | radar | デフォルトにしない（下記参照） |
| タスクの期間・依存関係・milestone | gantt | 依存が密な場合は表を併記 |
上記に当てはまらない関係（分布・before/after・多系列比較等）は、対応 chart type への安易な代替を避け、data table での表現を優先する。無理に非対応の chart type を模して自作 SVG を追加しない。
Radar chart はデフォルトにしない。多軸プロフィールの「形」を俯瞰すること自体に価値があり、軸が少数で同一スケールへ正当に正規化できる場合だけ使用する。
原則として以下を避ける。
開始日・終了日・milestone・依存関係のある計画には gantt を優先する。gantt は次を満たす。
.chart-wrap で横スクロール可能にする日付が不明な task に架空の日付を与えない。
HTML を直接組み立てる前に、renderer が扱える中間 report spec（JSON）を作る。仕様は references/report-spec.md を参照する。
report spec には最低限以下を持たせる。
各 chart definition には最低限以下を含める。
計算済み SVG 座標を report spec に保存しない。座標計算は renderer の責務とする。project 内の成果物として残す必要がなければ一時ファイルとして扱う。
まず必須 CLI の python3 の存在を確認する。
command -v python3 >/dev/null || echo "python3 が見つからない"
未導入の場合は処理を中止し、導入方法を案内する（macOS: brew install python3。その他の環境: 各環境の公式セットアップ手順または環境管理者に確認する。導入後に再実行。権限昇格を要するコマンドは案内しない）。
python3 "${CLAUDE_SKILL_DIR}/scripts/render_report.py" \
--spec "<report-spec.json>" \
--output "<output.html>"
ユーザー指定がなければ出力先は _/reports/<descriptive-report-name>.html。必要なら先に出力ディレクトリを作る。
renderer は Python 標準ライブラリのみで動作する設計とし、外部 package installation を前提にしない。詳細は references/report-design.md を参照する。
必須: <!doctype html> / <html lang="..."> / <meta charset="utf-8"> / viewport meta / descriptive <title> / <header> / <main> / semantic <section> / <footer>。
長いレポートでは table of contents を追加する。Skip to main content link を設ける。desktop で sticky navigation を使う場合も main content の横幅を狭めすぎず、mobile では通常 flow に戻す。
各 chart は原則 figure > figcaption(chart title) > takeaway/explanation > SVG > annotation/source > exact-data table の構造にする。
chart title は単なる名詞ではなく可能なら主要な傾向を伝える。悪い例: 「売上推移」。良い例: 「売上は4月以降3か月連続で増加」。
<caption> / <thead> / <tbody> / <th scope="col"> を使い、必要に応じて <th scope="row"> を使う。数値は右寄せし単位と桁数を一貫させる。幅広 table は .table-wrap { max-width: 100%; overflow-x: auto; } で囲み、body 全体を横スクロールさせない。
chart-specific な詳細は references/chart-selection.md を参照する。共通ルール:
bar の量を長さで表す軸は原則0から開始する。line / scatter は必要に応じて non-zero baseline を使用できるが、誤解を招かない scale とし切り取った範囲が重要なら明示する。
Missing data を 0 に変換しない。line では missing interval を gap として表現する。N/A・unknown・not measured が異なる意味なら区別する。
Inline SVG を使う。意味のある chart は原則 <svg role="img" aria-labelledby="chart-title-id chart-desc-id"> に <title> / <desc> を対応させる。SVG の情報が直前の文章と data table で完全に重複し screen reader の二重読上げが悪影響になる場合のみ aria-hidden="true" を選択してよい。どちらでも重要なデータを SVG だけに存在させない。
CSS custom properties を design token として使う。最低限 --bg --surface --fg --muted --border --grid --focus --series-1〜 を :root に定義し color-scheme: light dark と prefers-color-scheme に対応する。
カテゴリカル系列には Okabe-Ito パレット（色覚多様性対応の事実上の標準）を使う。
#0072B2 #E69F00 #56B4E9 #009E73 #D55E00 #CC79A7 #F0E442 #000000
4系列以下は青(#0072B2)・オレンジ(#E69F00)・空色(#56B4E9)・朱(#D55E00)を優先する。カテゴリカルは6色以下に抑える。heatmap 等の連続値は Viridis / Cividis 系の知覚的に均一な配色を使う（グレースケール印刷でも判別可能）。
contrast の目標: 通常テキスト 4.5:1 以上、large text 3:1 以上、意味を持つ chart element / control は adjacent background と 3:1 以上。
red / green だけで positive / negative を表現しない。例: 「↑ +12.4% Increase」「↓ -8.1% Decrease」のように symbol / text も併用する。
viewBox を持ち .chart { width: 100%; height: auto; } とするclamp() を利用してよい.chart-wrap でラップし、small screen で意味が失われるほど chart を縮小しない必ず @media print を用意する。印刷時は light background・dark text とし、navigation / interactive controls を非表示にする。URL や chart がページ外へ切れないようにし、cards / figures / table rows の不自然な page break を break-inside: avoid-page 等で減らし、shadow・ink-heavy background を除去する。重要情報を閉じた disclosure 内だけに置かない。
標準モードでは JavaScript を必須にせず、まず native HTML / CSS（<details><summary>・anchor navigation・CSS sticky header）を使う。
--interactive が指定された場合、または静的表示では明らかに使いにくい大量データの場合だけ inline vanilla JavaScript を追加できる（table search / sort、series visibility、section collapse、theme override、gantt の detail toggle 等）。validator は renderer が注入する bundled JS との完全一致のみ許可するため、独自 script を HTML へ直接書かない（機能追加は renderer の INTERACTIVE_JS を拡張する）。
ただし以下を必ず守る。
motion を追加する場合は prefers-reduced-motion: reduce で animation-duration / transition-duration 等を 0.01ms に短縮する分岐を用意する。
詳細は references/accessibility-security.md を参照する。
ユーザー入力・外部ファイル・Web 取得データを trusted markup として扱わない。HTML / SVG の text node と attribute に入る文字列は renderer の escaping function（Python では html.escape(value, quote=True) 相当）を必ず一元利用する。同じ escape 処理を JavaScript / CSS / URL context に流用しない。untrusted data を <script> / <style> / event handler attribute / raw URL / raw HTML へ直接埋め込まない。数値は parse 後に有限値であることを確認する。
inline JavaScript を使う場合、external library・eval・new Function・untrusted string の innerHTML 代入・onclick="..." 等の inline handler を禁止する。DOM 挿入は textContent / createElement を優先し addEventListener を使う。fetch / XMLHttpRequest / WebSocket / EventSource / sendBeacon 等の network access を行わない。
外部リンクを許可するのは原則 source / reference の <a href> のみで、URL scheme は https: に限定し javascript: URL を禁止する。新しい tab で開く場合は rel="noopener noreferrer" を付ける。
禁止: <script src="https://...">、external stylesheet / font、remote <img>、<iframe src="https://...">、<object data="https://...">、CSS @import / url(https://...)、remote SVG <image> / <use>、runtime network request。
token・credential・secret・個人情報・非公開内部情報を不用意にレポートへ埋め込まない。入力に secret が見つかった場合は sk-abc...xyz のように redaction する。公開可能性が不明な機密情報を含む場合、公開前提の出力先へ書き込まない。
生成後、必ず validator を実行し、以下の5段階ゲートで完了を確認する（.claude/rules/verification.md 準拠）。
validate_report.py の実行と exit code をもって完了とみなすpython3 "${CLAUDE_SKILL_DIR}/scripts/validate_report.py" "<output.html>"
validator は最低限以下を確認する。
javascript: URL がない可能なら browser でも目視確認する。browser tool がないことだけを理由に生成を失敗扱いにしない。
bar / line / scatter / heatmap / waterfall / donut / radar / gantt のみ。非対応の関係性は無理に代替せず data table を使う_/reports/ 等）が存在しない場合は mkdir -p で作成してから書き出す完了時は簡潔に以下を報告する。
例:
HTML レポートを生成しました:
<absolute-path>
Validation: PASS
内容: 3案の性能・コスト・リスク比較と、実装スケジュールの gantt を含みます。
必要な場合だけ読む。
このスキルは sandbox 環境で実行できる。renderer（scripts/render_report.py）は純ローカルの Python 処理であり、ネットワーク越しの操作を行わない。既定の出力先 _/reports/ はワークスペース内だが、--output <path> に絶対パスや ../ を含む相対パスを指定した場合はワークスペース外へも書き込み得る（ワークスペース内に限定する制約は設けていない）。そのため「ネットワーク不要かつワークスペース外への書き込み経路も無い」とは言い切れない。--output を省略するか、正規化後にワークスペース配下へ解決されるパスを指定する限り、実行結果はワークスペース内に収まる。