スキル自身の言葉で
Web Design Reviewerは、ブラウザ自動化ツールを通じて稼働中のウェブサイトを操作し、視覚的に検査した上で、見つかった問題をソースコード内で修正します。静的サイト、React・Vue・Angular・SvelteによるSPA、Next.jsやNuxtのようなフルスタックフレームワーク、WordPressやDrupalなどのCMSプラットフォーム、その他あらゆるウェブアプリケーションに対応します。
ワークフローは4つのフェーズで構成されます。まずコンテキストを収集してフレームワークとスタイリング手法を自動検出し、次に視覚チェックリストに基づいてページを検査し、P1からP3の優先度で問題を修正し、最後に再検証してループします。検出結果はレイアウト、レスポンシブ、アクセシビリティ、視覚的一貫性として分類され、それぞれに深刻度が付与されます。修正は最小限の変更という原則に従い、最終的にMarkdown形式のレビューレポートで完結します。
生成されるもの
- Web Design Review Resultsという名前のMarkdownレビュー結果レポートです。
- 対象URL、検出されたフレームワーク、スタイリング、テスト済みビューポート、検出された問題、修正された問題を網羅したサマリー表です。
- 優先度、ページ、要素、説明、修正されたファイルパス、修正内容、修正前後のスクリーンショットを含む、問題ごとのエントリです。
- 各問題が残された理由とユーザーへの推奨対応を示す未修正問題セクション、および一般的な推奨事項です。
仕組み
- 01コンテキストの収集とスタックの検出
URLが指定されていない場合はURLを尋ね、次にpackage.json、tsconfig.json、tailwind.config、next.config、vite.config、nuxt.configなどのワークスペースファイルから自動検出を試み、対象となるページを確認します。
- 02移動とキャプチャ
対象URLを開いてスクリーンショットを取得し、可能な場合はDOM構造やスナップショットを取得し、サイトナビゲーションを通じてさらに他のページを巡回します。
- 03視覚チェックリストに基づく検査
レイアウト、レスポンシブ対応、アクセシビリティ、ビジュアルの一貫性の問題は、リファレンスチェックリストを順に確認しながら検出され、修正後にも再度使用されます。
- 04問題の発生元を特定する
問題のある要素は、クラス名や IDでコードベースを検索したり、要素のテキストや構造からコンポーネントを特定したり、スタイル・コンポーネント・ページファイルのパターンを絞り込んだりすることで、発生元まで追跡されます。
- 05修正してから再検証する
フレームワーク固有のガイダンスに従って修正が適用され、その後ブラウザをリロードするか dev サーバーの HMR を待ち、修正箇所を再度スクリーンショットして前後を比較します。