verify-artifact

成果物の検証

/done より詳細なチェックです。実際のレンダリングをビジョン機能で確認し、コンソールエラーだけでなく視覚的な問題も検出します。

パイプライン

1. プレビューが表示されていることを確認します： $0 が Chrome DevTools MCP ですでに開かれていない場合は、まず /preview $0 で移動します。

2. デッキ対応の事前チェック（<deck-stage> がある場合）。 デッキのセクションには overflow: hidden が指定されています。垂直方向のはみ出しは見た目には分からないため、ビジョン機能だけでは検出できません。スクリーンショットを撮る前に、ハードリロードとキャッシュ回避も行い、ブラウザーが前回の編集前のキャッシュではなく、現在ディスク上にある CSS をレンダリングしていることを確認します：

   mcp__chrome-devtools__navigate_page({ type: "reload", ignoreCache: true })
   

   続いて、プログラムによる監査を実行します：

   // mcp__chrome-devtools__evaluate_script
   async () => {
     const stage = document.querySelector('deck-stage');
     if (!stage) return { isDeck: false };
     const DECORATIVE = '.glow, .glow-2, .hero-glow, .chrome, [data-decorative], [aria-hidden="true"].backdrop';
     const isDecorative = (el) => {
       if (el.matches(DECORATIVE) || el.closest(DECORATIVE)) return true;
       const cs = getComputedStyle(el);
       if (cs.pointerEvents === 'none' && !el.textContent?.trim() && parseFloat(cs.opacity) < 1) return true;
       return false;
     };
     const out = [];
     for (let i = 0; i < stage.totalSlides; i++) {
       stage.goToSlide(i);
       await new Promise(r => setTimeout(r, 80));
       const s = stage.querySelectorAll('section')[i];
       const sRect = s.getBoundingClientRect();
       const scale = 1080 / sRect.height;
       let maxBottom = 0, culprit = null;
       for (const el of s.querySelectorAll('*')) {
         if (isDecorative(el)) continue;
         const cs = getComputedStyle(el);
         if (cs.display === 'none' || cs.visibility === 'hidden') continue;
         const r = el.getBoundingClientRect();
         if (r.height === 0 && r.width === 0) continue;
         const b = (r.bottom - sRect.top) * scale;
         if (b > maxBottom) { maxBottom = b; culprit = el.className?.toString?.().slice(0, 40) || el.tagName; }
       }
       const contentBottom = Math.round(maxBottom);
       const overflow = contentBottom - 1080;
       const headroom = 1080 - contentBottom;
       const status = overflow > 0 ? 'FAIL' : headroom < 40 ? 'WARN' : 'OK';
       out.push({ slide: i + 1, contentBottom, overflow, headroom, status, culprit });
     }
     stage.goToSlide(0);
     return { isDeck: true, slides: out };
   }
   

   重大度：

   • FAIL（overflow > 0）— P0。コンテンツが見えない状態ではみ出しています。該当するスライドと原因となっているクラスの一覧を報告し、検証の残りをスキップして、Claude に修正を依頼します。
   • WARN（headroom < 40）— P1。端に近く、見た目に窮屈です（フォントメトリクスの差異によってはみ出す可能性があります）。軽微な問題として報告します。
   • OK — 続行します。

3. タイムスタンプ付きのパスに最新のスクリーンショットを保存します：

   ts=$(Bash(date -u +%Y%m%dT%H%M%SZ))
   mcp__chrome-devtools__take_screenshot({ filePath: `.claude/verify-${ts}.png`, fullPage: true })
   

   オーバーフロー監査に合格したデッキでは、位置 [0, mid, last] のスライドもサンプリングし、.claude/verify-${ts}-slide-${n}.png として保存します。現在のビューポートだけでなく、各スライドをビジョン機能で確認します。

4. ビジョン機能でスクリーンショットを読み取ります： .claude/verify-<ts>.png に対して Read ツールを使用します。Claude はマルチモーダルなので、画像を入力として認識します。

5. コンソールを取得します： mcp__chrome-devtools__list_console_messages — すべての重大度を収集します。

6. 画像とコンソールを確認します。 Claude Design のデザインルールに照らしてチェックします：

   • タイポグラフィ：1920×1080 のスライドではテキストが 24px 以上、印刷物では 12pt 以上、モバイルのタップ対象では 44px 以上であること。読みやすい階層構造にし、AI っぽいフォント（Inter、Roboto、Arial、Fraunces）は使わないこと。
   • レイアウト：はみ出し、クリッピング、位置ずれがなく、余白のリズムが一貫していること。
   • 色：本文のコントラスト比が 4.5:1 以上であること。ブランド／デザインシステムに基づいたパレットを使用し、独自に色を作らないこと。
   • コンテンツ：Lorem ipsum や TODO マーカーが表示されたままになっていないこと。埋め草がないこと。
   • AI っぽいデザインの定番：強いグラデーション、左側にアクセントの境界線がある角丸カード、ブランド上の理由がない絵文字、SVG で描いた画像（プレースホルダーを使用すること）がないこと。
   • コンソール：エラー、React のハイドレーション不一致、CORS、アセットの欠落。

7. 重大度の基準：

   • P0 — 成果物が壊れている（クラッシュ、空白ページ、大きなはみ出し）
   • P1 — 見た目に問題がある（コントラスト不足、タイポグラフィ違反、レイアウトの不具合）
   • P2 — 改善の余地がある（余白の不統一、軽微な色のずれ）
   • P3 — 細かな指摘

8. 問題がなければ応答しません： P0／P1 の問題がなく、コンソールもクリーンな場合は、1 行だけ返します：verify-artifact: OK

   • 問題がない場合、それ以外は何も出力しないでください。不要なノイズになります。

9. 報告： 問題が見つかった場合は、Claude が修正できるだけの精度で、スクリーンショット上の座標または要素の説明を添えて、重大度別に列挙します：

   [P1] Header h1 at top-left is 18px — should be ≥ 32px for slide context
   [P2] Footer contrast 3.2:1 vs 4.5:1 minimum — lighten text or darken bg
   

10. 自動修正ループ（ユーザーが依頼した場合のみ）：P0／P1 の各問題を修正し、その後 verify-artifact を再実行します。

任意の詳細チェック

ユーザーが詳細なチェックを依頼した場合は、以下を実行します：

• mcp__chrome-devtools__performance_start_trace — LCP／CLS／INP
• mcp__chrome-devtools__lighthouse_audit — アクセシビリティ／ベストプラクティス／SEO

これらは任意です。デフォルトの検証では、スクリーンショット、コンソール、ビジョン機能のみを使用します。

代替手段：バックグラウンドでの並列チェック

非常に大きな成果物（スライド 20 枚以上）で検証時間が重要な場合は、Agent ツール（Claude Code に組み込まれています）を使ってサブエージェントを起動し、作業を続けている間に視覚的な検査を並行して実行できます。プロンプトにはスクリーンショットのパスとコンソール出力を渡します。これは任意です。ほとんどの成果物では、インラインでの検証が効果的です。