Comparing Screenshots

FigmaデザインとHTML生成物のスクリーンショットを比較し、ピクセルレベルで差異を検出するスキル。

Overview

このスキルは以下を提供します：

1. HTMLスクリーンショット取得 - Puppeteerを使用したHTML画面キャプチャ
2. Figmaスクリーンショット取得 - MCP経由でFigma画像を取得
3. 画像比較 - pixelmatchによるピクセル単位の差異検出
4. 差分レポート - 視覚的な差異の定量化

Quick Start

# 1. セットアップ（初回のみ）
cd ~/.agents/scripts/html-screenshot && npm install