evaluate

評価

あらゆる AI 生成成果物の包括的な品質評価を行います。レポートはビジュアライゼーションとして出力します。

仕組み

┌──────────────────────────────────────────────┐
│                                              │
│  Phase 1: SPEC GENERATION                    │
│  Analyze the artifact type                   │
│  Generate tailored evaluation criteria       │
│  Define scoring dimensions + weights         │
│  Set quality gates                           │
│           │                                  │
│           ▼                                  │
│  Phase 2: EVALUATION                         │
│  Run automated checks (when possible)        │
│  Visual/manual inspection                    │
│  Score each dimension with evidence          │
│  Identify systemic vs local issues           │
│           │                                  │
│           ▼                                  │
│  Phase 3: REPORT (via /visualize)            │
│  Generate a beautiful HTML eval report       │
│  Scores, charts, screenshots, fix list       │
│  Radar chart of dimensions                   │
│  Before/after tracking                       │
│                                              │
└──────────────────────────────────────────────┘

フェーズ 1：仕様の生成

あらゆる成果物について、次の分析に基づいて評価仕様を生成します。

1. 成果物の種類を特定する

• HTML ビジュアライゼーション → ビジュアルデザイン、インタラクティブ性、技術面、コンテンツ、共有のしやすさ
• コード／プロジェクト → 正確性、可読性、アーキテクチャ、テストカバレッジ、パフォーマンス
• ドキュメント／レポート → 明確さ、構成、正確性、完全性、トーン
• 会話／エージェント → 有用性、正確性、トーン、効率、安全性
• スライドデッキ → すべてのビジュアライゼーションの評価軸に加え、ストーリーの流れ、説得力、進行のテンポ
• ダッシュボード → データの正確性、情報密度、一覧性、実用性
• カスタム → スキルの SKILL.md と明記された目標から評価軸を導き出す

2. 評価軸を生成する

成果物の種類ごとに、6～10 個の評価軸を設定します。各評価軸には次の項目が必要です。

• 名前 — 短く明確なラベル
• 説明 — この評価軸で測定する内容
• 重み — パーセンテージ（重みの合計は 100%）
• スコア基準 — 10、8、6、4 の評価に該当する状態
• 自動チェック — プログラムで実行できるテスト（該当する場合）
• 減点項目 — 具体的な問題とその減点数

3. 品質ゲートを設定する

成果物の目的に基づいてゲートを定義します。

ゲート	基準	意味
🚀 最高品質	総合評価 ≥ 9.5、すべて ≥ 9	クラス最高の品質です。どこでも共有できます。
✅ リリース可能	総合評価 ≥ 9.0、すべて ≥ 8	本番環境で使用できます。
⚠️ 許容可能	総合評価 ≥ 8.0、すべて ≥ 7	使用できますが、特に優れているわけではありません。
🔧 要修正	総合評価 ≥ 7.0、または 7 未満の項目がある	リリース前に修正してください。
❌ 不合格	総合評価 < 7.0、または 5 未満の項目がある	大幅な修正が必要です。

4. 仕様書を出力する

仕様を eval-spec-[artifact-name].md に書き込み、参照や再利用に備えます。

フェーズ 2：評価

HTML ビジュアライゼーションの場合

ブラウザーで 3 種類のビューポート（1280×720、768×1024、375×667）を使って開きます。

自動監査（ブラウザーのコンソールで実行）：

(function() {
  const audit = {};
  const style = [...document.querySelectorAll('style')].map(s => s.textContent).join(' ');
  const html = document.documentElement.outerHTML;

  // Structure
  audit.hasDoctype = /^<!doctype html>/i.test(html);
  audit.hasLangAttr = !!document.documentElement.lang;
  audit.hasCharset = !!document.querySelector('meta[charset]');
  audit.hasViewport = !!document.querySelector('meta[name="viewport"]');
  audit.hasTitle = document.title.length > 0;

  // Menu system
  audit.menuExists = !!document.querySelector('.viz-menu');
  audit.menuHasTheme = !!html.match(/cycleTheme|themeLabel/i);
  audit.menuHasDownload = !!html.match(/htmlToImage|html-to-image/i);
  audit.menuHasPrint = !!html.match(/window\.print/i);

  // Theme system
  audit.hasCSSVars = !!style.match(/--bg\s*:/);
  audit.hasDarkTheme = !!style.match(/(\.theme-dark|:root)[\s\S]*?--bg/);
  audit.hasLightTheme = !!style.match(/\.theme-light/);
  audit.themePersistedToStorage = !!html.match(/localStorage.*theme/i);

  // Typography
  audit.hasInterFont = !!html.match(/fonts\.googleapis.*Inter|font-family.*Inter/i);
  audit.hasFontFallback = !!style.match(/-apple-system|system-ui/);
  audit.bodyFontSize = parseFloat(getComputedStyle(document.body).fontSize);
  audit.bodyFontOK = audit.bodyFontSize >= 14;

  // Layout
  audit.usesFlexOrGrid = !!(style.match(/display\s*:\s*(flex|grid)/));
  audit.hasMaxWidth = !!style.match(/max-width/);
  audit.hasResponsiveBreakpoints = !!style.match(/@media.*max-width|@media.*min-width|sm:|md:|lg:/);

  // Print & Accessibility
  audit.hasPrintStyles = !!style.match(/@media\s*print/);
  audit.hasPrintColorAdjust = !!style.match(/print-color-adjust/);
  audit.hasReducedMotion = !!style.match(/prefers-reduced-motion/);
  audit.hasAriaLabels = !!html.match(/aria-label/);
  audit.hasSemanticHTML = !!html.match(/<(header|main|nav|section|article|footer)/);

  // Animations
  audit.hasKeyframes = !!style.match(/@keyframes/);
  audit.hasTransitions = !!style.match(/transition\s*:/);

  // Performance
  audit.fileSizeKB = Math.round(new Blob([html]).size / 1024);
  audit.fileSizeOK = audit.fileSizeKB < 200;
  audit.noExternalImages = document.querySelectorAll('img[src^="http"]').length === 0;
  audit.htmlToImageLoaded = typeof htmlToImage !== 'undefined';

  // Summary
  const bools = Object.entries(audit).filter(([k,v]) => typeof v === 'boolean');
  const passed = bools.filter(([k,v]) => v).length;
  audit._passed = passed;
  audit._total = bools.length;
  audit._percent = Math.round(passed / bools.length * 100);
  audit._failures = bools.filter(([k,v]) => !v).map(([k]) => k);

  console.table(audit);
  return audit;
})();

ビジュアル評価 — ビジュアライゼーション向けの 8 つの評価軸：

#	評価軸	重み	10 =	6 =
D1	第一印象	15%	Apple の基調講演並みの品質	汎用テンプレートのような印象
D2	タイポグラフィ	15%	完璧な階層構造、Inter フォント、可変サイズ	すべて同じサイズで、階層構造がない
D3	色とコントラスト	10%	調和が取れ、WCAG AA に準拠し、どちらのテーマも美しい	色がちぐはぐで、コントラストが低い
D4	レイアウトと余白	15%	一貫したリズム、レスポンシブ、ゆとりのある余白	窮屈で、モバイルでレイアウトが崩れる
D5	コンテンツの品質	15%	5 秒でメッセージが伝わり、無駄な要素がない	分かりにくく、プレースホルダーテキストがある
D6	インタラクティブ性	10%	メニュー、テーマ、ダウンロード、印刷がすべて完璧に動作する	機能が足りない、または動作しない
D7	技術面	10%	エラーがなく、セマンティックで、アクセシブル、印刷に対応	コンソールエラーがあり、レイアウトが崩れる
D8	共有のしやすさ	10%	自発的に投稿したくなる	Canva の品質に劣る

コード／プロジェクトの場合

評価軸：正確性、可読性、アーキテクチャ、エラー処理、パフォーマンス、テスト、ドキュメント、セキュリティ

ドキュメントの場合

評価軸：明確さ、構成、正確性、完全性、トーン、書式、実用性、簡潔さ

エージェントとの会話の場合

評価軸：有用性、正確性、トーン、効率、安全性、コンテキストの把握、ツールの使用、最後までの対応

フェーズ 3：ビジュアルレポート（/visualize 経由）

スコアリング後、visualize スキルを使って、評価レポートを美しい HTML ダッシュボードとして生成します。

レポートの構成

1. ヒーロー — 成果物名、全体スコア（大きな数値）、品質ゲートバッジ
2. レーダーチャート — すべてのディメンションをレーダー／スパイダーチャートにプロット（Chart.js）
3. ディメンションカード — 各ディメンションを、スコア、バー、主な注記を含むカードとして表示
4. 自動監査 — パーセンテージ付きの合格／不合格チェックリスト
5. スクリーンショット — 主要なビューを埋め込み（HTML 成果物の場合）
6. 修正リスト — 優先順位を付けた修正項目をカンバン形式で表示（critical／high／medium／low）
7. 全体的な問題 — すべての出力に影響するパターン（SKILL.md の修正が必要なものとしてフラグ付け）
8. 履歴 — 再評価の場合、変更前後のスコア比較チャートを表示

レポートのファイル名

eval-report-[artifact-name]-[date].html

レポート自体が、visualize 評価基準で 9.0 以上のスコアを獲得する必要があります。

これは究極のドッグフーディングテストです。つまり、評価ツールが可視化ツールを使って評価を生成します。

改善ループ

Generate artifact (any skill)
       ↓
/evaluate → Spec + Score + Visual Report
       ↓
Review report → identify fixes
       ↓
Fix (systemic → SKILL.md, local → artifact)
       ↓
/evaluate again → compare scores
       ↓
Ship when gate = SHIP or EXCEPTIONAL

成果物ごとにループは最大 3 回です。 3 回のループで SHIP に到達できない場合、問題はスキルにあります。成果物ではなく、スキルの指示を更新してください。

クイックスタート

# Evaluate a visualization
/evaluate path/to/visualization.html

# Evaluate with custom context
/evaluate path/to/code-project --type code

# Re-evaluate after fixes (tracks improvement)
/evaluate path/to/visualization.html --loop 2

# Generate specs only (no scoring)
/evaluate --specs-only --type dashboard