mcpField
H
html-report-builder

html-report-builder

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

html-report-builder について

html-report-builderは、整ったスタイルの単独HTMLレポートを作成し、ブラウザーからPDFに出力するスキルです。監査、実績分析、戦略文書向けに、デザイン規則と再利用可能なコンポーネントを用意しています。

主な機能

  1. 01単独HTMLレポートの作成
  2. 02ブラウザーからPDFへ出力
  3. 03再利用可能なレポート部品
  4. 04色とタイポグラフィの規則
  5. 05複数セクションの文書構成

活用シーン

  1. 01監査レポートの作成
  2. 02実績分析の提示
  3. 03戦略文書の作成
  4. 04HTML成果物のPDF出力

インストール

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

$npx skills add https://github.com/thatrebeccarae/claude-marketing --skill html-report-builder

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

同梱ファイル

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

EXAMPLES.md
LICENSE
REFERENCE.md

詳細

HTML レポートビルダー

洗練されたコンサルティングレポートを、単体で動作する HTML として作成します。ブラウザーから PDF に印刷できます。

インストール

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/html-report-builder ~/.claude/skills/

使用する場面

  • 監査レポート、パフォーマンス分析、戦略文書
  • プロフェッショナルな書式が必要な複数セクションの文書全般
  • 成果物がレポートの場合（スライドではありません。デッキには pro-deck-builder を使用してください）

クイックリファレンス

タスク方法
レポートをゼロから作成するCSS と HTML のパターンについては REFERENCE.md を参照してください
新しいコンポーネントを追加するREFERENCE.md の既存コンポーネントを組み合わせます
PDF にエクスポートするブラウザーで開く → 印刷 → PDF として保存（Cmd+P）
デザイントークンを更新する:root ブロックの CSS カスタムプロパティを編集します

開始前に

ユーザーに次のことを尋ねます。

  1. どのような種類のレポートですか？ 監査、戦略、パフォーマンスレビュー、ケーススタディなど。
  2. セクションはいくつありますか？ 文書の構成を計画するのに役立ちます。
  3. どのようなデータがありますか？ 生の数値、API エクスポート、スプレッドシートなど。
  4. ファイルはどこに保存しますか？ 明確なパスを指定してもらいます。

デザインシステム

カラートークン
:root {
  /* Dark mode (cover page only) */
  --bg-deep: #141414;
  --bg-surface: #1E1E1E;
  --bg-elevated: #282828;
  --text-bright: #f0f3f6;
  --text-secondary-dark: #9ca3af;

  /* Light mode (content pages — the default) */
  --bg-light: #FAF7F2;
  --bg-light-surface: #F2EDE6;
  --text-primary: #0f0e0e;
  --text-secondary: #57606a;
  --text-muted: #8b949e;

  /* Brand accent */
  --accent: #3D7A5C;
  --accent-light: #6AB88A;

  /* Semantic */
  --green: #2e8b57;
  --red: #c0392b;
  --amber: #D97706;
}
色のルール
  • ライトモード（#FAF7F2 の温かみのあるクリーム色）を、すべてのコンテンツページのデフォルトにします。白は使用しません。
  • ダークモード（#141414）を使うのは表紙のみです。
  • アクセントグリーン（#3D7A5C）は控えめに使用します。重要な指標やアクセント付きのコールアウトに使います。
  • セマンティックカラー（緑／琥珀色／赤）はステータス表示にのみ使用し、装飾には使いません。
タイポグラフィ
役割フォントウェイトサイズ
レポートタイトルSwitzerLight (300)48-64px
セクション見出しSwitzerRegular (400)28-32px
サブセクション見出しSwitzerMedium (500)20-22px
本文SwitzerRegular (400)16-17px
KPI の数値Cartograph CFBold (700)36-48px
データラベルCartograph CFRegular (400)13px
表のデータCartograph CFRegular (400)14px

重要なルール：

  1. 見出しには Bold ではなく Light (300) を使用します。 大きなサイズの Light は、自信と高級感を表現します。
  2. すべての数値／データコンテンツに Cartograph CF を使用します。 KPI、表の数値、ラベルが対象です。
  3. 見出しの文字間隔を詰めます。 -0.03em ～ -0.04em。
  4. すべて大文字のラベルの文字間隔を広げます。 +0.08em ～ +0.1em。

フォントの読み込み：

  • Switzer：Fontshare CDN から無料で利用できます
  • Cartograph CF：商用フォントで、local() 経由で読み込みます。フォールバック：'JetBrains Mono', 'Consolas', monospace

文書の構成

Cover Page (dark) → Table of Contents → Executive Summary → Findings (3-6 sections) → Recommendations → Appendix

コンポーネントライブラリ

コンポーネント用途
KPI カード大きな数値＋ラベル＋詳細
データテーブル等幅フォントの数値と重要度カラーを使ったスタイル付きの表
コールアウトボックス強調する洞察や結論
推奨事項カード影響度と工数のバッジ付きの番号付きアクション
優先度バナー重要／警告／情報のアラートバー
セクション区切り大きなセクション間の視覚的な区切り
箇条書きリスト独自のマーカーを使ったスタイル付きリスト
番号付きリストアクセントカラーの番号を使った順序付きリスト

ナラティブルール

  1. 数値から始めます。 指標を先に示し、説明を後にします。
  2. 1 セクションにつき洞察は 1 つです。 2 つのポイントを述べるセクションは、分割します。
  3. すべてにベンチマークを付けます。 文脈なしで指標を示してはいけません。
  4. 色に意味を持たせます。 緑／琥珀色／赤はパフォーマンス指標にのみ使用します。
  5. 白い背景は使いません。 常に温かみのあるクリーム色 #FAF7F2 を使用します。
  6. 太字の見出しは使いません。 レポートタイトルとヒーロー見出しには Switzer Light (300) を使用します。

PDF エクスポート

HTML ファイルを Chrome／Safari で開き、Cmd+P を押して、PDF として保存します。余白を「なし」に設定し、「背景のグラフィック」を有効にしてください。

CSS フレームワークと HTML パターンの全容については、REFERENCE.md を参照してください。

コメント

Markdown 対応