Measures a page the way Chrome and real users see it, finds what makes it slow or unusable, and checks the fix against WCAG.
Built for: The front-end engineer with a failing Lighthouse score, an accessibility complaint and a page that feels fast on their own laptop.
The button opens the checkout, where the 5 servers and 6 skills are listed one by one. Every member is free, so the checkout lists them and asks for no card.
The reason to buy a stack rather than five listings: each line below needs more than one member connected at the same time.
Record a performance trace in Chrome, name the element behind a slow LCP and say which phase of it is slow.
Put lab scores next to Chrome UX Report field data for the same URL, so a fix is judged by what users saw.
Scan a page or a whole site with axe-core, audit keyboard and screen-reader behaviour, and tie each finding to its WCAG success criterion.
Find a memory leak by comparing heap snapshots taken before and after the action that leaks.
What each part contributes, and why it was picked over the obvious alternative. Prices and permissions are read from the listings, so nothing here can disagree with the catalogue.
Chrome DevTools' own server: performance traces and insights, network requests, console messages, heap snapshots and Lighthouse audits in a real Chrome.
Runs a Lighthouse audit and returns the scores, for a quick before-and-after on one URL.
PageSpeed Insights with Chrome UX Report field data, which is how real visitors experienced the page rather than one lab run.
axe-core scans in Playwright, whole-site audits, and keyboard and screen-reader audits of the page as it renders.
WCAG 2.2 principles, success criteria, techniques and failures from W3C data, so a finding cites the criterion it breaks.
Chrome DevTools' procedure for Largest Contentful Paint — find the element, split the time, fix the part that is slow.
Semantic HTML, ARIA, focus, keyboard navigation, tap targets and contrast, checked with the DevTools server.
Heap snapshots compared over time, for the tab that gets slower the longer it stays open.
Addy Osmani's performance skill: measure first, then fix Core Web Vitals, bundles and slow queries in that order.
A WCAG 2.2 audit with automated checks, the manual ones automation misses, and remediation for each finding.
Testing with VoiceOver, NVDA and JAWS — what to listen for and how to write it down.
Every member is free, so the monthly figure is $0 whatever you do with the stack: nothing here is billed by the call, and only adding a paid member could change it.
| Part | What you are paying for | Monthly, as quoted |
|---|---|---|
| Chrome DevTools | Free | — |
| Lighthouse | Free | — |
| Pagespeed Insights | Free | — |
| Accessibility Scanner | Free | — |
| Wcag Guidelines | Free | — |
| Skills | ||
| Debug Optimize Lcp | Free · context cost only | — |
| A11y Debugging | Free · context cost only | — |
| Memory Leak Debugging | Free · context cost only | — |
| Performance Optimization | Free · context cost only | — |
| WCAG Audit Patterns | Free · context cost only | — |
| Screen Reader Testing | Free · context cost only | — |
| Everything above | $0 of servers plus $0 of skills, the same in a quiet month and a busy one | $0/mo |
Subscriptions at their monthly plan price; one-off licences spread over 12 months.
Install only these and the bill is nothing: 5 servers and 6 skills, and all 2 tools.
Nothing in this stack carries a call allowance, so nothing here can run out before the month does. The bill is decided when you install it, not when you use it.
The spend cap is one figure for the whole account, set in your dashboard and checked when an order is placed. On the call path what stops a retry loop is the plan's call allowance and its rate limit, and a refused call is never billed.
The steps below come before the install lines: what to decide and scope before connecting anything, in the order it matters. The lines themselves follow, part by part, for the client you pick.
npx mcprush@latest stack add web-vitals writes all 5 servers into Claude Code’s config in one go — or run the lines below one by one. The 6 skills are not included — add them with lines 06–11.
GOOGLE_API_KEY — Google API key with PageSpeed Insights API enabledSet it where you start Claude Code — export GOOGLE_API_KEY=… in your shell profile on macOS and Linux, setx GOOGLE_API_KEY "…" on Windows, then open a new terminal. Claude Code reads it at start; the config keeps only the name.
# 01 · Chrome DevTools
claude mcp add --scope user chromedevtools-chrome-devtools-mcp '--' npx -y chrome-devtools-mcp
# 02 · Lighthouse
claude mcp add --scope user priyankark-lighthouse-mcp '--' npx -y lighthouse-mcp
# 03 · Pagespeed Insights
claude mcp add --scope user --env 'GOOGLE_API_KEY=${GOOGLE_API_KEY}' --transport stdio pagespeed-insights-mcp '--' npx -y pagespeed-insights-mcp
# 04 · Accessibility Scanner
claude mcp add --scope user justasmonkev-accessibility-scanner-mcp '--' npx -y mcp-accessibility-scanner
# 05 · Wcag Guidelines
claude mcp add --scope user wcag-guidelines-mcp '--' npx -y wcag-guidelines-mcp
# 06 · Debug Optimize Lcp
npx mcprush@latest skill add chromedevtools/debug-optimize-lcp
# 07 · A11y Debugging
npx mcprush@latest skill add chromedevtools/a11y-debugging
# 08 · Memory Leak Debugging
npx mcprush@latest skill add chromedevtools/memory-leak-debugging
# 09 · Performance Optimization
npx mcprush@latest skill add addyosmani/performance-optimization
# 10 · WCAG Audit Patterns
npx mcprush@latest skill add wshobson/wcag-audit-patterns
# 11 · Screen Reader Testing
npx mcprush@latest skill add wshobson/screen-reader-testingnpx).Set-ExecutionPolicy -Scope CurrentUser RemoteSigned once, or type npx.cmd instead of npx (codex.cmd, gemini.cmd, grok.cmd likewise). PowerShell 7 needs neither.Nothing is connected until you approve it in Claude Code. mcprush is not in the path and meters nothing here.
Installed together, these tool surfaces add up. It is the first thing a security reviewer asks for, so what has been counted — and what nobody has counted yet — is on the page rather than in a PDF.
| Member | Tool surface | Write tools |
|---|---|---|
| Accessibility Scanner | not imported | not recorded |
| Chrome DevTools | not imported | not recorded |
| Pagespeed Insights | not imported | not recorded |
| Wcag Guidelines | not imported | not recorded |
A stack's blast radius is the union of its members, not the worst of them. That union cannot be taken here, because 4 members of 5 have no imported tool surface — so the figure a review asks for is missing rather than low, and a member marked not imported is one nobody has counted rather than one that cannot write.
A stack is a default, not a verdict. These are the substitutions the maintainer would make, and what each one costs or saves.
The maintainer lists no alternatives for this stack.
Written by the maintainer, kept on the page rather than in a support thread.
Automated scans find a share of accessibility problems, not all of them. The screen-reader skill is here because a person still has to listen to the page.
Field data exists only for pages with enough Chrome traffic; a new or quiet page gets lab numbers alone.
It does not deploy the fix. It measures and recommends; the change goes through your repository.
A stack has an owner: whoever keeps it re-checks the combination when a member changes, and the members themselves are published by the people named on each row.
Tools to inspect code changes, run checks and prepare a pull request review.
Tools to investigate a bug report and work toward a reproducible test case.
Tools to investigate alerts, check recent changes and follow the runbook.