"Before making any changes, capture baseline screenshots of all the key pages. Run the audit and fixes in parallel using multiple agents: one for performance/build, one for accessibility, one for SEO, one for code cleanup. After all changes are complete, take screenshots at desktop, tablet, and mobile breakpoints and compare with the baseline to make sure nothing broke visually. Update CLAUDE.md with what changed. Finally, create a reusable skill so I can run this same audit workflow in the future."
"Capture screenshots before making changes This triggers Claude Code's MCP (Model Context Protocol) integration. If you have Playwright MCP configured, Claude will actually launch a browser, navigate to your pages, and capture screenshots. Why this matters: You now have a visual record of what your site looked like before any changes. This is crucial for the comparison step later. Run"
Claude Code can automate comprehensive site audits for performance, accessibility, SEO, and code quality while preserving the existing UX and design. The workflow captures baseline screenshots of key pages before making changes. Multiple agents run in parallel to handle performance/build, accessibility, SEO, and code cleanup tasks. After changes, screenshots at desktop, tablet, and mobile breakpoints are captured and compared to baselines to verify visual fidelity. CLAUDE.md is updated to record changes and a reusable skill is created to rerun the same audit workflow in the future. Playwright MCP enables automated browser screenshots for comparison.
Read at Hardik Pandya
Unable to calculate read time
Collection
[
|
...
]