Back to Details

create-html-report

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

create-html-report

create-html-report

$ARGUMENTS をもとに、分析結果を「読むだけで要点が分かり、必要なら詳細まで確認できる」自己完結 HTML レポートへ変換する。
最終成果物は原則として単一 
.html
ファイルとする。
基于$ARGUMENTS，将分析结果转换为「只需阅读就能了解要点，必要时可查看详情」的自包含HTML报告。
最终成果原则上为单一
.html
文件。

使い方

使用方法

引数でレポート化したい内容（比較対象・データ・目的）を渡す。引数が曖昧な場合は Step 1 でユーザーに確認する。
  • 出力先はユーザー指定がなければ 
    _/reports/<report-name>.html
  • --interactive
    指定時、または静的表示では扱いにくい大量データの場合のみ inline JavaScript を許可する
  • --output <path>
    で出力先を明示指定できる
通过参数传递想要生成报告的内容（比较对象、数据、目的）。若参数模糊，将在Step 1中向用户确认。
  • 若无用户指定，输出路径为
    _/reports/<report-name>.html
  • 仅当指定
    --interactive
    ，或静态显示难以处理大量数据时，允许使用inline JavaScript
  • 可通过
    --output <path>
    明确指定输出路径

Core contract

Core contract

必ず以下を満たす。
  1. Insight first — グラフを作ること自体を目的にしない。最重要な結論・変化・リスク・意思決定材料を先に特定し、その理解を助ける可視化だけを使う。
  2. Do not invent data — 不明な値・日付・割合・単位・ステータスを推測で補完しない。欠損は欠損として扱う。必要な仮定を置く場合はレポート内に明示する。
  3. Self-contained — 外部 CDN・外部 font・外部 JavaScript library・外部 stylesheet・外部画像へ依存しない。CSS・SVG・必要な JavaScript は HTML 内に含める。データ出典への通常の 
    <a href="https://...">
    は外部依存とみなさない。ページロード時に外部通信してはならない。
  4. Accessible by default — 色だけに情報を依存させない。グラフの主要な内容は文章または表でも確認できるようにする。キーボード・screen reader・dark mode・拡大表示を考慮する。
  5. Progressive enhancement — 主要な結論とデータは JavaScript なしでも読めるようにする。インタラクションは理解を補助する場合だけ追加する。
  6. Deterministic rendering — SVG 座標計算・escaping・テーマ・基本コンポーネントは bundled renderer に任せる。Claude が毎回同じ SVG boilerplate を手作業で再実装しない。
必须满足以下要求：
  1. Insight first — 不以制作图表本身为目的。先确定最重要的结论、变化、风险、决策依据，仅使用有助于理解这些内容的可视化。
  2. Do not invent data — 不通过推测补全未知的数值、日期、比例、单位、状态。缺失值按缺失处理。若需设定必要假设，需在报告中明确说明。
  3. Self-contained — 不依赖外部CDN、外部字体、外部JavaScript库、外部样式表、外部图片。CSS、SVG、必要的JavaScript均包含在HTML内。指向数据来源的普通
    <a href="https://...">
    不视为外部依赖。页面加载时不得进行外部通信。
  4. Accessible by default — 不单纯依赖颜色传递信息。图表的主要内容需同时可通过文字或表格确认。需考虑键盘操作、屏幕阅读器、深色模式、放大显示。
  5. Progressive enhancement — 核心结论和数据需在无JavaScript的情况下也能阅读。仅在辅助理解时添加交互功能。
  6. Deterministic rendering — SVG坐标计算、转义、主题、基础组件交由bundled renderer处理。Claude无需每次手动重新实现相同的SVG模板。

フロー

流程

Step 1: Context と入力データを把握する

Step 1: 把握Context与输入数据

会話・引数・指定ファイル・既存データから以下を特定する。
  • レポートの目的、想定読者、意思決定したいこと
  • 対象・期間、指標と単位、データソース
  • 比較対象、スケジュール・依存関係、不確実性・欠損値
会話や既存データから十分推定できる場合は質問しない。情報不足でも有用な部分レポートを作れる場合は、勝手に値を補完せず「制約・不足情報」として明示して進める。正しいレポートを作れないほど目的・入力が曖昧な場合だけ最小限の確認を行う。
从对话、参数、指定文件、现有数据中确定以下内容：
  • 报告的目的、目标读者、需要决策的事项
  • 对象、时间段、指标与单位、数据源
  • 比较对象、日程安排/依赖关系、不确定性/缺失值
若可通过对话或现有数据充分推断，则无需提问。若信息不足但可生成有用的部分报告，请勿自行补全数值，需明确标注「限制条件·缺失信息」后推进。仅当目的/输入模糊到无法生成正确报告时，才进行最少必要的确认。

Step 2: narrative を設計する

Step 2: 设计narrative

HTML を書く前に内部的に次を整理する。
  • 最も重要な 1 メッセージ、3〜5 個の key findings
  • 意思決定・推奨事項、findings を裏付けるデータ、詳細確認用の情報
情報階層は原則次の順序にする。
  1. Title / scope
  2. Executive summary
  3. KPI / key findings
  4. Decision / recommendation（該当する場合）
  5. Main visual analysis
  6. Schedule / risks / dependencies（該当する場合）
  7. Detailed data
  8. Methodology / assumptions
  9. Sources / generated metadata
すべてを1画面のダッシュボードへ押し込まない。重要情報を上に置き、詳細は下へ続ける。
编写HTML前，需在内部整理以下内容：
  • 最重要的1条核心信息，3~5个关键发现
  • 决策/建议、支撑发现的数据、供详情确认的信息
信息层级原则上按以下顺序排列：
  1. 标题/范围
  2. 执行摘要
  3. KPI/关键发现
  4. 决策/建议（如有）
  5. 主要可视化分析
  6. 日程/风险/依赖关系（如有）
  7. 详细数据
  8. 方法论/假设
  9. 来源/生成元数据
请勿将所有内容强行塞进单页仪表板。将重要信息置于上方，详情放在下方。

Step 3: データの「関係」から chart type を選ぶ

Step 3: 根据数据的「关系」选择chart type

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 はデフォルトにしない。多軸プロフィールの「形」を俯瞰すること自体に価値があり、軸が少数で同一スケールへ正当に正規化できる場合だけ使用する。
renderer支持的chart type仅为
bar
/
line
/
scatter
/
heatmap
/
waterfall
/
donut
/
radar
/
gantt
这8种。请勿先定图表类型再适配，需根据想要传达的关系进行选择。
想要传达的关系chart type补充说明
类别间的大小·排名比较
bar
推荐使用横棒，轴从0开始
时间序列的趋势·变化
line
缺失值以gap表示，不进行虚构补全
两个变量的相关性
scatter
相关性说明需通过annotation补充
各时间段的数量·时间×类别的分布
heatmap
连续值使用感知均匀的配色
对增减的贡献·累积变化
waterfall
明确显示起始值、结束值、差值
部分与整体的比例（构成比）
donut
最多6个分割，需同时附上准确数值的表格
多变量概况
radar
不默认使用（参见下文）
任务的时间段·依赖关系·里程碑
gantt
依赖关系密集时需同时附上表格
若不符合上述关系（如分布、前后对比、多系列比较等），请勿勉强用对应chart type替代，优先使用数据表格表示。请勿强行模仿不支持的chart type自行添加SVG。
Radar chart不默认使用。仅当多轴概况的「形态」本身具有俯瞰价值，且轴数量少、可合理归一化为同一尺度时才使用。

Chart anti-patterns

Chart anti-patterns

原則として以下を避ける。
  • 3D chart、gauge / speedometer、不要な gradient・過剰な shadow
  • dual-axis chart、10系列以上を重ねた line chart、大量 slice の donut
  • 装飾目的だけの chart、比較目的なのに baseline が不統一な chart
  • 面積や色だけで厳密比較させる chart
原则上避免以下情况：
  • 3D图表、仪表盘/速度计、不必要的渐变·过度阴影
  • 双轴图表、重叠10个以上系列的line chart、大量切片的donut
  • 仅用于装饰的图表、用于比较但基准不统一的图表
  • 仅通过面积或颜色进行严格比较的图表

Step 4: gantt / schedule を使う場合

Step 4: 使用gantt/日程安排时

開始日・終了日・milestone・依存関係のある計画には 
gantt
を優先する。gantt は次を満たす。
  • 左側に task / workstream 名、横軸に実日付、week / month 等の適切な tick
  • phase ごとの grouping、milestone は diamond 等 bar 以外の形で表示
  • progress がある場合は planned bar 上へ progress を重ねる
  • current date が期間内にある場合は today line を表示
  • status は色だけでなく文字・pattern・symbol でも区別
  • dependency arrow が密集する場合は無理に描画せず dependency table を併記
  • mobile では潰さず 
    .chart-wrap
    で横スクロール可能にする
  • SVG と同じ task / start / end / status / progress を表でも確認可能にする
日付が不明な task に架空の日付を与えない。
对于包含开始日期、结束日期、里程碑、依赖关系的计划，优先使用
gantt
。gantt需满足以下要求：
  • 左侧显示任务/工作流名称，横轴显示实际日期，设置week/month等合适的刻度
  • 按阶段分组，里程碑用菱形等非条形形状表示
  • 若有进度，在计划条形上叠加进度显示
  • 当前日期在时间段内时，显示today line
  • 状态不仅用颜色区分，还需用文字·图案·符号区分
  • 依赖箭头过于密集时，请勿强行绘制，需同时附上依赖关系表格
  • 在移动端不压缩，通过
    .chart-wrap
    实现横向滚动
  • SVG中的任务/开始/结束/状态/进度需同时可通过表格确认
请勿为日期不明的任务赋予虚构日期。

Step 5: report spec を作成する

Step 5: 创建report spec

HTML を直接組み立てる前に、renderer が扱える中間 report spec（JSON）を作る。仕様は references/report-spec.md を参照する。
report spec には最低限以下を持たせる。
  • metadata、title / subtitle、scope、executive summary、findings
  • sections、chart definitions、tables、annotations、assumptions、sources
各 chart definition には最低限以下を含める。
  • chart type（上記8種のいずれか）、semantic title、takeaway、units
  • series、labels、raw numeric/date data、source、accessibility summary
計算済み SVG 座標を report spec に保存しない。座標計算は renderer の責務とする。project 内の成果物として残す必要がなければ一時ファイルとして扱う。
直接组装HTML前，先创建renderer可处理的中间report spec（JSON）。规格请参考references/report-spec.md。
report spec至少需包含以下内容：
  • metadata、标题/副标题、范围、执行摘要、发现
  • sections、图表定义、表格、注释、假设、来源
每个图表定义至少需包含以下内容：
  • chart type（上述8种之一）、语义化标题、核心结论、单位
  • series、标签、原始数值/日期数据、来源、可访问性摘要
请勿将计算好的SVG坐标保存到report spec中。坐标计算由renderer负责。若无需作为项目成果保留，可作为临时文件处理。

Step 6: renderer で HTML を生成する

Step 6: 使用renderer生成HTML

まず必須 CLI の 
python3
の存在を確認する。
bash
command -v python3 >/dev/null || echo "python3 が見つからない"
未導入の場合は処理を中止し、導入方法を案内する（macOS: 
brew install python3
。その他の環境: 各環境の公式セットアップ手順または環境管理者に確認する。導入後に再実行。権限昇格を要するコマンドは案内しない）。
bash
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 を参照する。
首先确认必需CLI工具
python3
是否存在。
bash
command -v python3 >/dev/null || echo "python3 が見つからない"
若未安装，则中止处理并引导安装方法（macOS: 
brew install python3
。其他环境: 参考各环境的官方设置步骤或咨询环境管理员。安装后重新执行。请勿引导需要权限提升的命令）。
bash
python3 "${CLAUDE_SKILL_DIR}/scripts/render_report.py" \
  --spec "<report-spec.json>" \
  --output "<output.html>"
若无用户指定，输出路径为
_/reports/<descriptive-report-name>.html
。必要时先创建输出目录。
renderer设计为仅使用Python标准库运行，不依赖外部包安装。详情请参考references/report-design.md。

HTML information design

HTML信息设计

Page shell

Page shell

必須: 
<!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 に戻す。
必需内容: 
<!doctype html>
/
<html lang="...">
/
<meta charset="utf-8">
/viewport meta标签/描述性
<title>
/
<header>
/
<main>
/语义化
<section>
/
<footer>
。
长报告需添加目录。设置
Skip to main content
链接。桌面端使用sticky导航时，请勿过度缩小主内容宽度；移动端需恢复正常流布局。

Visual hierarchy

Visual hierarchy

  • max content width を設定し1カラムを基本とする。KPI や小さな比較のみ responsive grid にする
  • 長文の line length を制限し、section 間に十分な whitespace を取る
  • chart とその説明を一つの visual unit として扱う
  • KPI card だけを大量に並べない。KPI は「ユーザーが最初に知る価値が高い値」に限定する
  • 设置最大内容宽度，以单列布局为基础。仅KPI或小型比较使用响应式网格
  • 限制长文本的行长度，各section之间保留足够空白
  • 将图表及其说明视为一个视觉单元
  • 请勿大量排列KPI卡片。KPI仅限「用户最先需要了解的高价值数值」

Chart unit

Chart unit

各 chart は原則 
figure > figcaption(chart title) > takeaway/explanation > SVG > annotation/source > exact-data table
の構造にする。
chart title は単なる名詞ではなく可能なら主要な傾向を伝える。悪い例: 「売上推移」。良い例: 「売上は4月以降3か月連続で増加」。
每个图表原则上采用
figure > figcaption(图表标题) > takeaway/说明 > SVG > 注释/来源 > 精确数据表格
的结构。
图表标题不应仅为名词，尽可能传达主要趋势。反面示例：「销售趋势」。正面示例：「销售额自4月以来连续3个月增长」。

Tables

Tables

<caption>
/ 
<thead>
/ 
<tbody>
/ 
<th scope="col">
を使い、必要に応じて 
<th scope="row">
を使う。数値は右寄せし単位と桁数を一貫させる。幅広 table は 
.table-wrap { max-width: 100%; overflow-x: auto; }
で囲み、body 全体を横スクロールさせない。
使用
<caption>
/
<thead>
/
<tbody>
/
<th scope="col">
，必要时使用
<th scope="row">
。数值右对齐，保持单位和位数一致。宽表格用
.table-wrap { max-width: 100%; overflow-x: auto; }
包裹，避免body整体横向滚动。

Data visualisation rules

数据可视化规则

chart-specific な詳細は references/chart-selection.md を参照する。共通ルール:
  • 同じ series / entity はレポート全体で同じ visual identity を使い、色だけで区別しない
  • 必要に応じて direct label・line style・marker・pattern を併用する
  • annotation は短く対象の近くへ配置し、gridline は読取りに必要な分だけ使う
  • axis・unit・period を曖昧にせず、chart の下に source / note を置く
  • key finding は chart だけに閉じ込めず本文にも書く
各图表的具体规则请参考references/chart-selection.md。通用规则：
  • 同一series/实体在整个报告中使用相同的视觉标识，不单纯依赖颜色区分
  • 必要时同时使用直接标签、线条样式、标记、图案
  • 注释需简短并放置在对象附近，网格线仅保留必要数量
  • 不模糊轴、单位、时间段，图表下方放置来源/注释
  • 关键发现不仅在图表中体现，也需写入正文

Axis integrity

Axis integrity

bar
の量を長さで表す軸は原則0から開始する。
line
/ 
scatter
は必要に応じて non-zero baseline を使用できるが、誤解を招かない scale とし切り取った範囲が重要なら明示する。
bar
图表中表示数量的轴原则上从0开始。
line
/
scatter
可根据需要使用非零基线，但需采用不会引起误解的刻度；若截取的范围很重要，需明确说明。

Missing values

Missing values

Missing data を 0 に変換しない。
line
では missing interval を gap として表現する。
N/A
・
unknown
・
not measured
が異なる意味なら区別する。
请勿将缺失数据转换为0。
line
图表中缺失区间以gap表示。若
N/A
、
unknown
、
not measured
含义不同，需进行区分。

SVG accessibility

SVG accessibility

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 だけに存在させない。
使用Inline SVG。有意义的图表原则上采用
<svg role="img" aria-labelledby="chart-title-id chart-desc-id">
，并对应
<title>
/
<desc>
。若SVG信息与前文及数据表格完全重复，会导致屏幕阅读器重复朗读造成不良影响时，可选择使用
aria-hidden="true"
。无论哪种情况，重要数据都不应仅存在于SVG中。

Colour and contrast

颜色与对比度

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 も併用する。
使用CSS自定义属性作为设计令牌。至少在
:root
中定义
--bg
、
--surface
、
--fg
、
--muted
、
--border
、
--grid
、
--focus
、
--series-1
~，并支持
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系列感知均匀的配色（灰度打印也可识别）。
对比度目标：普通文本4.5:1以上，大文本3:1以上，有意义的图表元素/控件与相邻背景的对比度3:1以上。
不单纯用红/绿表示正/负。例如：「↑ +12.4% Increase」「↓ -8.1% Decrease」，同时使用符号/文本。

Responsive behaviour

响应式行为

  • SVG は 
    viewBox
    を持ち 
    .chart { width: 100%; height: auto; }
    とする
  • layout は Grid / Flexbox、font size には 
    clamp()
    を利用してよい
  • wide chart は 
    .chart-wrap
    でラップし、small screen で意味が失われるほど chart を縮小しない
  • mobile では decorative element を減らし、chart label が重なる場合は abbreviated label + table を使う
  • SVG需带有
    viewBox
    ，设置
    .chart { width: 100%; height: auto; }
  • 布局使用Grid/Flexbox，字体大小可使用
    clamp()
  • 宽图表用
    .chart-wrap
    包裹，小屏幕上不缩小到失去意义的程度
  • 移动端减少装饰元素，图表标签重叠时使用缩写标签+表格

Print / PDF-friendly CSS

Print / PDF-friendly CSS

必ず 
@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 内だけに置かない。
必须准备
@media print
。打印时使用浅色背景·深色文本，隐藏导航/交互控件。确保URL和图表不超出页面范围，通过
break-inside: avoid-page
等减少卡片/图表/表格行的不自然分页，去除阴影·耗墨的背景。重要信息不应仅放在折叠的disclosure内。

Interaction policy

Interaction policy

標準モードでは 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
を拡張する）。
ただし以下を必ず守る。
  • 最重要メッセージを見るために click を要求しない、hover-only tooltip を使わない
  • keyboard で操作でき visible focus を消さない
  • JavaScript 無効でも主要情報を読める、animation は原則不要
motion を追加する場合は 
prefers-reduced-motion: reduce
で 
animation-duration
/ 
transition-duration
等を 
0.01ms
に短縮する分岐を用意する。
标准模式下不依赖JavaScript，优先使用原生HTML/CSS（
<details><summary>
、锚点导航、CSS sticky header）。
仅当指定
--interactive
，或静态显示明显难以处理大量数据时，才可添加inline vanilla JavaScript（表格搜索/排序、系列可见性、section折叠、主题覆盖、gantt详情切换等）。验证器仅允许与renderer注入的bundled JS完全一致的内容，请勿直接向HTML写入自定义脚本（如需添加功能，请扩展renderer的
INTERACTIVE_JS
）。
但必须遵守以下规则：
  • 查看最重要信息无需点击，不使用仅hover的tooltip
  • 可通过键盘操作，不隐藏可见焦点
  • 禁用JavaScript时仍可阅读主要信息，原则上无需动画
  • 添加动效时，需通过
    prefers-reduced-motion: reduce
    将
    animation-duration
    /
    transition-duration
    等缩短至
    0.01ms
    的分支处理

Security

Security

詳細は references/accessibility-security.md を参照する。
详情请参考references/accessibility-security.md。

Untrusted data

Untrusted data

ユーザー入力・外部ファイル・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 後に有限値であることを確認する。
请勿将用户输入、外部文件、网页获取的数据视为可信标记。HTML/SVG的文本节点和属性中的字符串必须统一使用renderer的转义函数（Python中相当于
html.escape(value, quote=True)
）。请勿将同一转义处理用于JavaScript/CSS/URL上下文。请勿将不可信数据直接嵌入
<script>
/
<style>
、事件处理程序属性、原始URL、原始HTML。数值解析后需确认为有限值。

JavaScript

JavaScript

inline JavaScript を使う場合、external library・
eval
・
new Function
・untrusted string の 
innerHTML
代入・
onclick="..."
等の inline handler を禁止する。DOM 挿入は 
textContent
/ 
createElement
を優先し 
addEventListener
を使う。
fetch
/ 
XMLHttpRequest
/ 
WebSocket
/ 
EventSource
/ 
sendBeacon
等の network access を行わない。
使用inline JavaScript时，禁止使用外部库、
eval
、
new Function
、不可信字符串的
innerHTML
赋值、
onclick="..."
等inline handler。优先使用
textContent
/
createElement
进行DOM插入，使用
addEventListener
。禁止进行
fetch
/
XMLHttpRequest
/
WebSocket
/
EventSource
/
sendBeacon
等网络访问。

Links と external dependency

Links与external dependency

外部リンクを許可するのは原則 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。
原则上仅允许来源/参考的
<a href>
使用外部链接，URL scheme限定为
https:
，禁止
javascript:
URL。在新标签页打开时需添加
rel="noopener noreferrer"
。
禁止内容：
<script src="https://...">
、外部样式表/字体、远程
<img>
、
<iframe src="https://...">
、
<object data="https://...">
、CSS 
@import
/
url(https://...)
、远程SVG 
<image>
/
<use>
、运行时网络请求。

Sensitive data

Sensitive data

token・credential・secret・個人情報・非公開内部情報を不用意にレポートへ埋め込まない。入力に secret が見つかった場合は 
sk-abc...xyz
のように redaction する。公開可能性が不明な機密情報を含む場合、公開前提の出力先へ書き込まない。
请勿将令牌、凭证、密钥、个人信息、非公开内部信息随意嵌入报告。若输入中包含密钥，需进行脱敏处理（如
sk-abc...xyz
）。若包含公开性不明的机密信息，请勿写入以公开为前提的输出路径。

検証

验证

生成後、必ず validator を実行し、以下の5段階ゲートで完了を確認する（
.claude/rules/verification.md
準拠）。
  1. 特定: 
    validate_report.py
    の実行と exit code をもって完了とみなす
  2. 実行:
    bash
    python3 "${CLAUDE_SKILL_DIR}/scripts/validate_report.py" "<output.html>"
  3. 読取: 出力全体（PASS/FAIL・failure 一覧）と終了コードを確認する
  4. 検証: failure が0件であることを確認する。failure がある場合は HTML または report spec を修正し、再生成してから validator を再実行する
  5. 宣言: validator が pass した場合のみ完了を宣言する。「たぶん通る」等の推測で完了主張しない
validator は最低限以下を確認する。
  • output file が存在し non-empty、doctype / html / head / body、charset / viewport / title
  • duplicate IDs、SVG opening / closing consistency
  • external resource dependency がない、network API を使っていない
  • unsafe event handler / 
    javascript:
    URL がない
  • meaningful chart に accessible name / description がある
  • data table に caption / headers がある、heading order に重大な問題がない
  • horizontal body overflow を誘発する既知パターンがない、print CSS が存在する
  • source hyperlink と external resource dependency を混同していない
可能なら browser でも目視確認する。browser tool がないことだけを理由に生成を失敗扱いにしない。
生成后必须运行验证器，通过以下5步确认完成（符合
.claude/rules/verification.md
）。
  1. 确认: 将
    validate_report.py
    的执行及退出码视为完成依据
  2. 执行:
    bash
    python3 "${CLAUDE_SKILL_DIR}/scripts/validate_report.py" "<output.html>"
  3. 读取: 确认输出整体（PASS/FAIL、失败列表）和退出码
  4. 验证: 确认失败数为0。若有失败，需修改HTML或report spec，重新生成后再次运行验证器
  5. 宣告: 仅当验证器通过时才可宣告完成。请勿以「大概能通过」等推测主张完成
验证器至少确认以下内容：
  • 输出文件存在且非空，包含doctype/html/head/body、charset/viewport/title
  • 无重复ID，SVG开闭标签一致
  • 无外部资源依赖，未使用网络API
  • 无不安全的事件处理程序/
    javascript:
    URL
  • 有意义的图表包含可访问名称/描述
  • 数据表格包含caption/headers，标题顺序无重大问题
  • 无引发body横向溢出的已知模式，存在print CSS
  • 未混淆来源超链接与外部资源依赖
尽可能在浏览器中进行目视确认。请勿仅因无浏览器工具就判定生成失败。

注意事項

注意事项

  • 対応 chart type は 
    bar
    / 
    line
    / 
    scatter
    / 
    heatmap
    / 
    waterfall
    / 
    donut
    / 
    radar
    / 
    gantt
    のみ。非対応の関係性は無理に代替せず data table を使う
  • 外部 CDN・外部フォント・外部画像・外部 JS ライブラリは一切使用しない。ページロード時に外部通信してはならない
  • validator が pass するまで完成扱いにしない
  • レポートに機密情報を含める場合は、出力先が公開領域でないことを事前にユーザーへ確認する
  • レポート化対象のデータに機密情報や信頼できない外部由来データが含まれ、埋め込み可否が不明な場合は生成を中止し、ユーザーに確認を求める
  • 出力先ディレクトリ（
    _/reports/
    等）が存在しない場合は 
    mkdir -p
    で作成してから書き出す
  • 仅支持
    bar
    /
    line
    /
    scatter
    /
    heatmap
    /
    waterfall
    /
    donut
    /
    radar
    /
    gantt
    这几种chart type。不支持的关系请勿勉强替代，使用数据表格
  • 禁止使用任何外部CDN、外部字体、外部图片、外部JS库。页面加载时不得进行外部通信
  • 验证器通过前不得视为完成
  • 若报告包含机密信息，需事先向用户确认输出路径并非公开区域
  • 若待报告的数据包含机密信息或不可信的外部数据，且不确定是否可嵌入，需中止生成并向用户确认
  • 若输出目录（如
    _/reports/
    ）不存在，需先通过
    mkdir -p
    创建再写入

最終報告

最终报告

完了時は簡潔に以下を報告する。
  • generated report の絶対 path
  • validation result
  • 主要なレポート内容を一文
  • interactive mode を使った場合はその旨
例:
text
HTML レポートを生成しました:
<absolute-path>

Validation: PASS
内容: 3案の性能・コスト・リスク比較と、実装スケジュールの gantt を含みます。
完成时需简洁报告以下内容：
  • 生成报告的绝对路径
  • 验证结果
  • 报告主要内容的一句话总结
  • 若使用了interactive mode需说明
示例：
text
已生成HTML报告:
<absolute-path>

Validation: PASS
内容: 包含3种方案的性能·成本·风险比较，以及实施日程的gantt图。

参照ファイル

参考文件

必要な場合だけ読む。
  • references/chart-selection.md — chart type ごとの選択条件・scale・annotation・gantt・heatmap・scatter 等の詳細
  • references/report-design.md — page layout・design tokens・responsive・print・component implementation
  • references/report-spec.md — renderer に渡す JSON report spec の schema と examples
  • references/accessibility-security.md — WCAG-oriented checklist、SVG/table accessibility、escaping、safe JavaScript policy
  • samples/comparison.json — 比較レポートの report spec 例
  • samples/project-gantt.json — gantt / milestone / dependency を含む例
  • samples/time-series.json — 時系列・annotation の例
仅在必要时阅读。
  • references/chart-selection.md — 各chart type的选择条件、刻度、注释、gantt、heatmap、scatter等详情
  • references/report-design.md — 页面布局、设计令牌、响应式、打印、组件实现
  • references/report-spec.md — 传递给renderer的JSON report spec的schema与示例
  • references/accessibility-security.md — 面向WCAG的检查清单、SVG/表格可访问性、转义、安全JavaScript策略
  • samples/comparison.json — 比较报告的report spec示例
  • samples/project-gantt.json — 包含gantt/里程碑/依赖关系的示例
  • samples/time-series.json — 时间序列·注释的示例

sandbox 環境での実行

sandbox环境下的执行

このスキルは sandbox 環境では実行できない。ネットワークアクセス・ファイルシステムへの書き込みが必要なため、通常の Claude Code セッションで実行すること。
本技能无法在sandbox环境中执行。因需要网络访问·文件系统写入权限，请在普通Claude Code会话中执行。