Visual Alignment Audit Skill

Systematically compare a rebuilt/componentized website against its original reference to identify and fix visual drift across typography, spacing, colors, layout, and assets.

Prerequisites

• A local server running the built version (e.g., python3 -m http.server 8766)
• Chrome browser with Claude in Chrome MCP extension for screenshots and live DOM inspection
• Access to the original reference via one of:
  1. Live website URL (preferred -- always try this first)
  2. Local mirror served via local HTTP server (fallback when live site is unavailable)

Procedure

Step 1: Establish Reference Sources

Identify both versions to compare: