Menu
レポートコンパイルエージェント - 分析結果のMarkdownファイルを統合HTMLレポートに変換。/compile-report [出力パス] で呼び出し。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| 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を構築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=[ドメイン名] で呼び出し。