インタラクティブ・インフォグラフィック＆エージェンティック・ジャッジデザインシステムは何をしますか？

概要と哲学

このスキルは、高自由度のデザインシステム、CSS/JSコンポーネントカタログ、そしてコピー＆カスタマイズ可能なHTMLテンプレートを提供します。これは、PythonによるデータからHTMLへの厳格なシリアライザではありません。 AIエージェントとAgentic Judge LLMは、Nordデザインシステムのビルディングブロックを使用して、直接カスタムHTMLを作成します。カスタムSVGトポロジ、インタラクティブ計算機、独自のライフサイクルステッパー、モーダル詳細表示、ドメイン固有の評価ダッシュボードを自由に構築できます。すべての成果物は100%自己完結型で、依存関係がなく、オフラインでも使用可能です。

コアテンプレートとアセット

assets/template-infographic.html: ダーク/ライトテーマ、折りたたみ可能なサイドバーTOC、アニメーションSVGデータフロー、10フェーズのインタラクティブライフサイクルステッパー、ダイアグラムパネル、色分け比較テーブル、カラー付きミニカード、キーボードアクセス可能なモーダルを備えた、完全なインタラクティブインフォグラフィックおよび技術ナラティブのボイラープレート。
assets/template-judge-report.html: CSPサンドボックス化されたAgentic Judge評価レポートのボイラープレート。意思決定サマリー、総合スコア、3カードKPIグリッド、フェーズ進捗バー、エビデンス比較テーブル、複数ポイントの所見（カラーNordミニカード）、診断コールアウトを含む。
assets/nord-design-system.css: ダーク/ライトCSSカスタムプロパティ、レスポンシブグリッド、ダイアグラムコンポーネント、テーブル、ミニカード、ステータスピルを備えた、完全なスタンドアロンNordデザインシステムスタイルシート。
references/design-system.md: 詳細なトークン仕様、コントラスト比、デザインガイドライン。
lint.py: 4つのハードデザイン不変条件とセーフティヒューリスティックを検証する検証ユーティリティ。

推奨ナラティブ構造

インタラクティブレポートを作成する際は、コンテンツを説得力のある視覚的階層に整理してください。

ヒーロー3カードKPIグリッド: アイブロウキッカー、目立つ見出し、導入ナラティブ、プライマリアクションボタン、3カードメトリックグリッド（.metric-gridまたは.card-grid）で主題を紹介します。
折りたたみ可能な左TOCサイドバー: <nav id="tocSidebar">に<div class="toc-list">と.toc-linkアンカーを含むインスタントナビゲーションを提供します。IntersectionObserverスクロールスパイとモバイルドロワーサポートを備えています。
アニメーションSVGアーキテクチャフロー: .diagram-flowを使用してコンポーネント間の動きを図示します。埋め込みSVG（.flow-svg）とアニメーションパルスインジケーター（.flow-pulse）を水平または垂直パスに沿って配置します。
インタラクティブな10フェーズライフサイクルステッパー/計算機: マルチステージプロセスやアルゴリズムを、.lifecycle、.lc-steps、.lc-stepボタンを使用して個別のステップに分割します。キーボード矢印ナビゲーションとアクティブな.lc-detailカードを備えています。
カラー.nord-mini-cardグリッド: 複数ポイントのリスト、推奨事項、アーキテクチャノートを、カラーのミニカード（ボーダーモディファイア付き.nord-mini-card）として表示し、.nord-card-gridまたは.card-mini-stackに配置します。
色分けされた.compare-tableマトリックス: トレードオフ、シナリオ結果、モデルベンチマークをtable.compare-tableで詳細に示し、.row-selected、.row-evaluated、.row-rejectedを適用して明確な視覚的区別を行います。
クリック可能なモーダル詳細表示: .modal-layerと.modalを介して補足的な技術コンテキストや来歴の詳細を提供し、フォーカストラップとEscapeキーによる閉じるアクセシビリティを維持します。

ビルディングブロックとコンポーネントレシピ

1. ヒーロー3カードKPIグリッド

デスクトップでは.metric-grid、.interactive-grid、または.nord-card-gridを3等分カラムで使用します。カードは行の高さに合わせて伸縮し、余ったカードは全幅に広がります。

<div class="card-grid metric-grid" aria-label="主要指標">
  <article class="hero-card">
    <span class="card-label">レイテンシ</span>
    <strong>180ms</strong>
    <p>往復応答時間の平均。</p>
  </article>
  <article class="hero-card">
    <span class="card-label">信頼性</span>
    <strong>99.98%</strong>
    <p>10,000回の実行における成功率。</p>
  </article>
  <article class="hero-card">
    <span class="card-label">カバレッジ</span>
    <strong>24 / 24</strong>
    <p>すべてのベンチマークシナリオが検証済み。</p>
  </article>
</div>

2. 折りたたみ可能な左TOCサイドバー（ゼロ`<ul>`リスト）

ナビゲーションサイドバーでは、<ul>や<li>タグを使わずに、<div class="toc-list">内にリンクをレンダリングします。

<nav class="sidebar" id="tocSidebar" aria-label="目次">
  <p class="sidebar-title">このページの内容</p>
  <div class="toc-list">
    <a class="toc-link" href="#overview"><span>01</span> 概要</a>
    <a class="toc-link" href="#architecture"><span>02</span> アーキテクチャ</a>
    <a class="toc-link" href="#evaluation"><span>03</span> 評価</a>
  </div>
</nav>

3. アニメーションSVGアーキテクチャフロー

SVGパスとアニメーションパルスでデータパイプラインを表現します。

<div class="diagram">
  <div class="diagram-header">
    <strong>実行パイプライン</strong>
    <span class="diagram-caption">シグナルから判定まで</span>
  </div>
  <div class="diagram-flow" aria-label="パイプラインステージ">
    <svg class="flow-svg flow-horizontal" viewBox="0 0 600 54" preserveAspectRatio="none" aria-hidden="true">
      <path class="flow-line" d="M 0 27 H 600"/>
      <circle class="flow-pulse" cx="0" cy="27" r="5"/>
    </svg>
    <div class="flow-node"><strong>取り込み</strong><small>入力を正規化</small></div>
    <div class="flow-node"><strong>分析</strong><small>アサーションを検証</small></div>
    <div class="flow-node"><strong>スコアリング</strong><small>判定を生成</small></div>
  </div>
</div>

4. カラーNordミニカード（箇条書きリストの代替）

箇条書きリスト（<ul><li>...</li></ul>）は、カード、セクション、モーダル全体で厳格に禁止されています。複数ポイントの所見は、カラーのNordミニカードとしてレンダリングします。

<div class="card-mini-stack">
  <div class="nord-mini-card border-green">
    <p><strong>正しさ確認済み:</strong> 決定論的チェックがすべてのテストケースで成功しました。</p>
  </div>
  <div class="nord-mini-card border-blue">
    <p><strong>コンテキスト効率:</strong> トークン使用率は最適範囲内に維持されました。</p>
  </div>
  <div class="nord-mini-card border-yellow">
    <p><strong>レイテンシ変動:</strong> フェイルオーバーパスではより長いネゴシエーション時間が必要でした。</p>
  </div>
  <div class="nord-mini-card border-red">
    <p><strong>既知の制限:</strong> 深い再帰には手動承認ゲートが必要です。</p>
  </div>
</div>

利用可能なボーダーカラーモディファイア：

.border-green: 成功、チェック合格、確認された強み（#a3be8c）。
.border-blue: プライマリ情報ポイント、中立的な観察（#88c0d0）。
.border-yellow: 警告、部分的な結果、注意喚起（#ebcb8b）。
.border-purple: 二次的な構造ノート、ライフサイクルヒント（#b48ead）。
.border-orange: 中程度の異常、パフォーマンス上の注意（#d08770）。
.border-red: 失敗、検出された欠陥、重大なリスク（#bf616a）。

5. 色分け比較マトリックス

比較ベンチマークとケース結果を.compare-tableで構造化します。

<div class="table-wrap" role="region" aria-label="オプション比較" tabindex="0">
  <table class="compare-table">
    <thead>
      <tr>
        <th scope="col">候補</th>
        <th scope="col">ステータス</th>
        <th scope="col">評価</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row-selected">
        <td><span class="cell-title">モデルA</span><span class="cell-sub">推奨</span></td>
        <td><span class="status-pill pill-good">選択済み</span></td>
        <td>高精度、最低レイテンシ、ポリシー違反ゼロ。</td>
      </tr>
      <tr class="row-evaluated">
        <td><span class="cell-title">モデルB</span><span class="cell-sub">フォールバック</span></td>
        <td><span class="status-pill pill-warn">評価済み</span></td>
        <td>許容可能な精度だが、推論コストが高い。</td>
      </tr>
      <tr class="row-rejected">
        <td><span class="cell-title">モデルC</span><span class="cell-sub">失格</span></td>
        <td><span class="status-pill pill-bad">却下</span></td>
        <td>ストレステスト中に許可された実行タイムアウトを超過。</td>
      </tr>
    </tbody>
  </table>
</div>

Agentic Judge HTML判定の出力

Agentic Judge LLMが最終評価判定を生成する場合：

判定はassets/template-judge-report.htmlに基づいて行います。
厳格なコンテンツセキュリティポリシーのメタタグを維持します: <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:">。
ジャッジドキュメント内でスクリプトを実行しないでください。すべてのスコア、進捗バー、マトリックスを直接静的なHTMLとしてレンダリングします。
レポートを意思決定サマリー（.summary.panel）、主要指標（.kpi-grid）、カバレッジ進捗（.progress-panel）、エビデンス（.compare-table）、所見（.nord-mini-card）、診断（.callout）で構成します。
4つのデザイン不変条件すべてが守られていることを確認します。

4つのハードデザイン不変条件

オーサリングしたHTMLレポートを配信する前に、以下の4つのハード不変条件を検証します。

ゼロ<ul>箇条書きリスト: <ul><li>...</li></ul>タグは、コンテンツ、ナビゲーション、モーダル内のどこでも禁止されています。カラーの.nord-mini-cardコンポーネントまたは<div class="toc-list">ナビゲーションを使用してください。
ゼロ絵文字: テキスト、見出し、ラベル内での絵文字の使用は禁止されています。クリーンなモノクロームSVGアイコン（埋め込みSVGシンボルなど）または簡潔なテキストラベルを使用してください。
.code-block内でゼロASCIIボックス描画: コードパネル内でのボックス描画文字（┌─┐、│、└─┘）は禁止されています。グラフィカルな.diagram-flow、.diagram-panels、または埋め込みSVGを使用してください。
有効な.compare-tableおよび.nord-mini-card CSSクラス: ドキュメントに比較テーブルとミニカードの有効なルールを含むNordデザインシステムスタイルシートが含まれているか、リンクされていることを確認します。

`lint.py`による検証

含まれているスタンドアロンlinterをPythonから実行します。

python3 lint.py <path-to-report.html>

linterは、すべての不変条件とセーフティチェックに合格した場合はコード0で終了し、違反がある場合はコード1で終了し、特定の行レベルの所見をstderrに出力します。リポジトリ全体で自動単体テストを実行することもできます。

python3 -m unittest discover -s tests -v

インタラクティブ・インフォグラフィック＆エージェンティック・ジャッジデザインシステム