compile-report
レポートコンパイルエージェント - 分析結果のMarkdownファイルを統合HTMLレポートに変換。/compile-report [出力パス] で呼び出し。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Menu
レポートコンパイルエージェント - 分析結果のMarkdownファイルを統合HTMLレポートに変換。/compile-report [出力パス] で呼び出し。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
ScalarDB Analytics設計エージェント - ScalarDB Analyticsを使用した分析基盤の設計。Apache Sparkベースの分析クエリ、マルチDB横断分析を策定。/design-scalardb-analytics [対象パス] で呼び出し。
ScalarDBサイジング見積もりエージェント - Enterprise/OSSエディション別のインフラ構成・Pod数・コストを対話形式で見積もり。/scalardb-sizing-estimator で呼び出し。
DDD評価エージェント - 戦略的設計・戦術的設計の両面からDDD原則への適合度を評価し改善点を特定。/ddd-evaluation [対象パス] で呼び出し。
システム分析エージェント - ユビキタス言語、アクター、ロール、権限、ドメイン-コード対応表を抽出。/analyze-system [対象パス] で呼び出し。
GraphDB構築エージェント - ユビキタス言語とコード解析結果からRyuGraphデータベースを構築。/build-graph [対象パス] で呼び出し。
ドメインストーリーテリングエージェント - ドメインストーリーの作成、ビジネスプロセスの可視化。/create-domain-story --domain=[ドメイン名] で呼び出し。
| name | compile-report |
| description | レポートコンパイルエージェント - 分析結果のMarkdownファイルを統合HTMLレポートに変換。/compile-report [出力パス] で呼び出し。 |
| user_invocable | true |
分析結果のMarkdownファイルを統合HTMLレポートに変換するエージェントです。
このエージェントは以下の機能を提供します:
/visualize-graphで生成)<script>, <img onerror>等)を自動的にエスケープしてXSS攻撃を防止レポートは2つの形式で生成できます:
| 形式 | 推奨用途 | 利点 | 欠点 |
|---|---|---|---|
| HTML | 単一ファイル配布、ローカル閲覧 | 単一ファイル、依存関係なし、検索機能あり | ページ分割なし、大きいファイル |
| Nextra | Webホスティング、大規模レポート | ページ分割、高速ナビゲーション、モダンUI | Node.js必要、ビルド時間長い |
選択ガイド:
あなたはレポートをコンパイルする専門家エージェントです。以下の手順でレポートを生成してください。
# 必要なパッケージの確認
source .venv/bin/activate
pip install markdown pymdown-extensions
レポート生成前にMermaid図の構文エラーをチェックします。
# mmdc がインストールされている場合
/fix-mermaid ./reports
注意: Mermaidの予約語問題
以下の単語はMermaidのsequenceDiagramで予約語として解釈されるため、participant名として使用しないでください:
| 予約語 | 代替案 |
|---|---|
BOX | BoxAPI, BoxPlatform, BoxWebhook |
box | 同上 |
例:
# NG
participant BOX as BOX Platform
# OK
participant BoxPlatform as BOX Platform
ナレッジグラフのインタラクティブビューアを含める場合、事前に可視化ファイルを生成します。
# GraphDBが構築済みの場合
/visualize-graph ./reports/graph
# GraphDBが未構築の場合は先に構築
/build-graph ./path/to/source
/visualize-graph ./reports/graph
生成されるファイル:
reports/graph/
├── visualizations/
│ ├── graph.html # D3.jsインタラクティブグラフ(これが必要)
│ ├── graph-mermaid.md # Mermaid形式
│ └── graph-dot.dot # DOT形式
└── data/
├── nodes.csv
└── edges.csv
重要: reports/graph/visualizations/graph.htmlが存在する場合、自動的にインタラクティブグラフがレポートに埋め込まれます。
source .venv/bin/activate && python scripts/compile_report.py \
--input-dir ./reports \
--output ./reports/00_summary/full-report.html \
--title "リファクタリング分析レポート"
自動的に実行される処理:
<!DOCTYPE html>
<html>
<head>
<title>リファクタリング分析レポート</title>
<script src="mermaid.min.js"></script>
<script src="d3.v7.min.js"></script>
<style>/* プロフェッショナルスタイル */</style>
</head>
<body>
<nav class="sidebar"><!-- サイドバー目次 --></nav>
<main class="main-content">
<section id="summary"><!-- エグゼクティブサマリー --></section>
<section id="analysis"><!-- 分析結果 --></section>
<section id="evaluation"><!-- MMI評価 --></section>
<section id="design"><!-- 設計書 --></section>
<section id="stories"><!-- ドメインストーリー --></section>
<section id="graph">
<!-- ナレッジグラフ -->
<!-- D3.jsインタラクティブビューア -->
</section>
</main>
</body>
</html>
| オプション | 説明 | デフォルト |
|---|---|---|
--input-dir | 入力ディレクトリ | ./reports |
--output | 出力HTMLファイル(--format html時) | ./reports/00_summary/full-report.html |
--title | レポートタイトル | リファクタリング分析レポート |
--theme | テーマ (light/dark)(--format html時) | light |
--format | 出力形式 (html/nextra) | html |
--nextra-output | Nextraサイト出力先(--format nextra時) | ./reports/nextra-site |
--no-verify | HTML検証をスキップ(--format html時) | false(検証はデフォルト有効) |
レポート生成後、各セクションが正しく表示されるかを検証します。
検証項目:
自動修正される問題:
検証の実行:
# スクリプト実行時に自動で検証(デフォルト)
python scripts/compile_report.py --input-dir ./reports --output ./reports/00_summary/full-report.html
# 検証をスキップ
python scripts/compile_report.py --input-dir ./reports --output ./reports/00_summary/full-report.html --no-verify
検証結果の出力例:
=== HTML Verification ===
✓ Section 'summary' - 2 articles
✓ Section 'analysis' - 5 articles
✓ Section 'evaluation' - 9 articles
✓ Section 'design' - 12 articles (3 config files)
✓ Section 'graph' - 2 articles + interactive viewer
⚠ Section 'stories' - Empty (no content found)
✓ Mermaid diagrams: 15 found
✓ Navigation links: 31 valid
=== Verification Complete ===
Warnings: 1
Errors: 0
Nextra形式は、Next.js + Nextra 2.xを使用した静的サイト生成です。
out/ディレクトリ)# Node.jsバージョン確認
node --version # 16.x以上
# Python環境
source .venv/bin/activate
python scripts/convert_to_nextra.py \
--input ./reports \
--output ./reports/nextra-site
自動実行される処理:
_meta.jsonの生成(ナビゲーション構造).mdxファイルの出力MDXエスケープルール(自動適用):
| パターン | 変換 | 理由 |
|---|---|---|
Array<String> | Array<String> | JSX汎用型syntax |
<500ms | <500ms | JSX開始タグとして解釈される |
{id}, {token} | \{id\}, \{token\} | JSX式として解釈される |
test<>.txt | test<>.txt | 空フラグメント |
<img src=x> | <img src=x> | XSSテスト用HTMLタグ |
注意: コードブロック内(...)はエスケープされません。
cd reports/nextra-site
npm install
初回のみ実行。依存関係:
cd reports/nextra-site
npx next build
出力: out/ ディレクトリに静的サイトが生成されます。
# ローカルサーバーで確認(開発モード)
cd reports/nextra-site
npx next dev
# ブラウザで開く
open http://localhost:3000
# 本番ビルド後のプレビュー
npx serve out/
reports/nextra-site/
├── pages/ # MDXソースファイル
│ ├── index.mdx # トップページ
│ ├── _meta.json # ナビゲーション定義
│ ├── 00_summary/ # エグゼクティブサマリー(3ページ)
│ ├── 01_analysis/ # システム分析(4ページ)
│ ├── 02_evaluation/ # 品質評価(8ページ)
│ ├── 03_design/ # アーキテクチャ設計(9ページ)
│ ├── 04_stories/ # ドメインストーリー(1ページ)
│ ├── 06_implementation/ # 実装仕様(2ページ)
│ ├── 07_test-specs/ # テスト仕様(11ページ)
│ └── graph/ # ナレッジグラフ(3ページ)
├── out/ # 静的サイト(next build後)
│ ├── index.html
│ ├── _next/ # JSバンドル
│ ├── 00_summary/
│ ├── 01_analysis/
│ └── ...
├── package.json
├── next.config.js
└── theme.config.tsx
Nextra 2.xはMermaidをネイティブサポートしていないため、カスタムコンポーネントが必要です:
import Mermaid from '@/components/Mermaid'
<Mermaid chart={`
graph TD
A[Start] --> B[End]
`} />
TODO: Mermaidコンポーネントの実装(次のステップ)
同様にカスタムコンポーネントが必要です:
import GraphViewer from '@/components/GraphViewer'
<GraphViewer dataPath="/data/graph.json" />
TODO: GraphViewerコンポーネントの実装(次のステップ)
エラー例:
Expected a closing tag for `<String>`
原因: MDXは<>や{}をJSX構文として解釈します。
対応: convert_to_nextra.pyが自動エスケープします。エラーが出る場合:
# 問題箇所を特定
npx next build # エラーメッセージでファイル名と行番号を確認
# 該当MDXファイルを編集
# Array<String> → Array<String>
# {id} → \{id\}
対応:
rm -rf .next/npx next build は変更ファイルのみ再ビルドエラー: ERESOLVE unable to resolve dependency tree
対応:
# 強制インストール
npm install --legacy-peer-deps
# またはpackage-lock.jsonを削除
rm package-lock.json
npm install
| 観点 | HTML | Nextra |
|---|---|---|
| ファイルサイズ | 1.3MB(単一) | 23MB(ディレクトリ) |
| ビルド時間 | ~10秒 | ~35秒 |
| ページ分割 | ❌ 単一ファイル | ✅ 44ページ |
| 検索機能 | ✅ Lunr.js | ✅ ビルトイン |
| ナビゲーション | サイドバーのみ | パンくず + 前/次移動 |
| モバイル対応 | ⚠️ 重い | ✅ 最適化済み |
| 配布方法 | 単一ファイル添付 | ディレクトリまたはホスティング |
| 依存関係 | Python | Node.js + npm |
| カスタマイズ | CSSのみ | Reactコンポーネント |
Nextra移行の技術詳細、MDXパターン問題の完全な分析、既知の制限については以下を参照:
📖 docs/nextra-investigation.md - Nextra移行調査レポート
スクリプトは各レポートディレクトリ(00_summary, 01_analysis, 02_evaluation, など)から自動的にすべてのMarkdownファイルを検出します。
動作:
visualizations/など)も検索対象対応するファイル構造:
reports/
├── 00_summary/ # エグゼクティブサマリー
├── 01_analysis/ # システム分析(全ファイル自動検出)
├── 02_evaluation/ # MMI評価
├── 03_design/ # 設計(API、ScalarDB含む全ファイル)
│ └── api-specifications/ # OpenAPI/AsyncAPI仕様(YAML/JSON)
├── 04_stories/ # ドメインストーリー(個別ストーリー含む)
├── 05_estimate/ # コスト試算
└── graph/ # ナレッジグラフ(サブディレクトリ含む)
Markdown以外の設定ファイルも自動的に検出し、シンタックスハイライト付きで表示します。
対応するファイル形式:
| 拡張子 | 形式 | 表示方法 |
|---|---|---|
.yaml, .yml | YAML | コードブロック(yaml) |
.json | JSON | フォーマット済みコードブロック(json) |
.properties | Properties | コードブロック(properties) |
.toml | TOML | コードブロック(toml) |
.xml | XML | コードブロック(xml) |
.env, .env.example | 環境変数 | コードブロック(bash) |
.feature | Gherkin | コードブロック(gherkin) |
.graphql, .gql | GraphQL | コードブロック(graphql) |
.proto | Protocol Buffers | コードブロック(protobuf) |
.tf, .hcl | Terraform/HCL | コードブロック(hcl) |
例: OpenAPI仕様の表示
reports/03_design/api-specifications/openapi.yamlが存在する場合:
<h2>Openapi</h2>
<pre><code class="language-yaml">
openapi: 3.0.0
info:
title: Order Service API
version: 1.0.0
paths:
/orders:
get:
summary: List orders
...
</code></pre>
自動検出されるディレクトリ:
api-specifications/ - API仕様書(OpenAPI, AsyncAPI, GraphQL, gRPC)config/ - 設定ファイルk8s/ - Kubernetesマニフェストschemas/ - スキーマ定義(JSON Schema, Protocol Buffers等)bdd-scenarios/ - BDDシナリオ(Gherkin .featureファイル)visualizations/ - 可視化ファイルreports/graph/visualizations/graph.htmlが存在する場合、自動的にインタラクティブグラフをレポートに埋め込みます。
機能:
前提:
/build-graph でGraphDBが構築済み/visualize-graph で可視化ファイルが生成済みMarkdownファイル内のmermaidブロックを自動的に<div class="mermaid">に変換し、Mermaid.jsでレンダリングします。
対応図:
非対応:
セキュリティテストケース等で危険なHTMLタグが含まれるMarkdownファイルを処理する際、自動的にXSS対策を行います。
エスケープ対象のタグ:
<script>...</script> - JavaScriptコード実行<img onerror="..."> - エラーハンドラによるコード実行<iframe>...</iframe> - 外部コンテンツ埋め込み<embed> - 外部リソース埋め込み<object>...</object> - 外部オブジェクト埋め込み処理例:
入力(Markdownテーブル内):
| File name with script | "<script>alert('XSS')</script>.pdf" | Rejected by validation |
出力(HTMLテーブル内):
<td>"<script>alert('XSS')</script>.pdf"</td>
動作:
html.escape()でHTMLエンティティに変換注意事項:
<div class="mermaid">、コードブロック内の<code>等、正当なHTMLタグはエスケープされませんreports/
└── 00_summary/
└── full-report.html # 統合HTMLレポート (約450KB)
# コマンド形式
/compile-report
# または直接実行
source .venv/bin/activate && python scripts/compile_report.py \
--input-dir ./reports \
--output ./reports/00_summary/full-report.html
# Step 1: 変換
python scripts/convert_to_nextra.py --input ./reports --output ./reports/nextra-site
# Step 2: ビルド
cd reports/nextra-site
npm install # 初回のみ
npx next build
# Step 3: 確認
npx serve out/
source .venv/bin/activate && python scripts/compile_report.py \
--input-dir ./reports \
--output ./reports/00_summary/full-report.html \
--title "My Project Report" \
--theme dark
# HTML
open reports/00_summary/full-report.html
# Nextra(ローカル開発サーバー)
cd reports/nextra-site && npx next dev
# → http://localhost:3000 を開く
# Nextra(ビルド済みサイト)
cd reports/nextra-site && npx serve out/
# → http://localhost:3000 を開く
/fix-mermaidで構文エラーをチェックreports/graph/visualizations/graph.htmlの存在を確認/visualize-graphを実行してファイルを生成HTMLを開いた際にXSSエラーが表示される場合:
<script>タグがエスケープされていない# sanitize_html_content関数が存在するか確認
grep -n "def sanitize_html_content" scripts/compile_report.py
source .venv/bin/activate && python scripts/compile_report.py \
--input-dir ./reports \
--output ./reports/00_summary/full-report.html
/render-mermaid - Mermaid図を画像に変換/fix-mermaid - Mermaid図のシンタックスエラーを修正/visualize-graph - GraphDBを可視化/build-graph - GraphDBを構築