How do I install the QA Chrome skill?

Run npx skillmds@latest add christopherlouet/qa-chrome in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is QA Chrome safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with QA Chrome?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is QA Chrome free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published QA Chrome?

christopherlouet (@christopherlouet) published this skill. Their other Agent Skills are listed on their SkillMD profile.

QA Chrome by christopherlouet — Agent Skill

Name: QA Chrome
Author: christopherlouet

QA Chrome

Visual tests and browser debugging via Chrome. Use to test web pages, verify visual rendering, debug with the console, or automate browser actions. Trigger when the user mentions "visual test", "Chrome", "browser", "browser console", "DOM", "screenshot", "GIF".

File contents

Visual Tests and Chrome Debugging (pointer)

DevTools features (network inspection, profiling, accessibility tree, console replay) are canonical at the Chrome team's MCP server:

ChromeDevTools/chrome-devtools-mcp — github.com/ChromeDevTools/chrome-devtools-mcp (Apache-2.0, maintained by the Google Chrome DevTools team). Configure in .mcp.json to give Claude Code direct programmatic access during a session.

This skill scopes to the manual-review checklist when using Claude Code's --chrome flag — what to look for, not how the API works.

Prerequisites

Claude Code launched with --chrome
"Claude in Chrome" extension v1.0.36+
Google Chrome open (not Brave/Arc/Firefox; no headless mode; WSL unsupported)

Manual-review checklist

When asked to visually validate a page or flow:

Page loads with no console error
Layout correct (no overflow, no overlap, no z-index bug)
Text readable (contrast meets WCAG AA — see wcag-audit)
Images loaded (no broken sources, lazy-load completes)
Links functional (no 404 in network panel)
Forms submittable (validation triggers on bad input)
Responsive OK across mobile/tablet/desktop breakpoints — see qa-design (responsive category)
No network error (no 4xx/5xx unless intentional)

Expected output

Structured report:

Screenshots/GIFs of issues
List of console + network errors with source location
Recommendations sorted by severity
Overall verdict: OK / Warnings / Errors

chrome-devtools-mcp (vendor MCP server, programmatic layer) — docs/recipes/recommended-vendor-skills.md
qa-design skill — UI/UX heuristics + responsive/breakpoint testing complement
wcag-audit — accessibility gate when contrast/readability issues surface
Audit pilot trace: specs/marketplace-audit/qa-skills-pilot-2026-05-06.md

---name: qa-chromedescription: Visual tests and browser debugging via Chrome. Use to test web pages, verify visual rendering, debug with the console, or automate browser actions. Trigger when the user mentions "visual test", "Chrome", "browser", "browser console", "DOM", "screenshot", "GIF".---# Visual Tests and Chrome Debugging (pointer)DevTools features (network inspection, profiling, accessibility tree, console replay) are canonical at the Chrome team's MCP server:- **`ChromeDevTools/chrome-devtools-mcp`** — [github.com/ChromeDevTools/chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) (Apache-2.0, maintained by the Google Chrome DevTools team). Configure in `.mcp.json` to give Claude Code direct programmatic access during a session.This skill scopes to the **manual-review checklist** when using Claude Code's `--chrome` flag — *what to look for*, not *how the API works*.## Prerequisites- Claude Code launched with `--chrome`- "Claude in Chrome" extension v1.0.36+- Google Chrome open (not Brave/Arc/Firefox; no headless mode; WSL unsupported)## Manual-review checklistWhen asked to visually validate a page or flow:- [ ] Page loads with no console error- [ ] Layout correct (no overflow, no overlap, no z-index bug)- [ ] Text readable (contrast meets WCAG AA — see `wcag-audit`)- [ ] Images loaded (no broken sources, lazy-load completes)- [ ] Links functional (no 404 in network panel)- [ ] Forms submittable (validation triggers on bad input)- [ ] Responsive OK across mobile/tablet/desktop breakpoints — see `qa-design` (responsive category)- [ ] No network error (no 4xx/5xx unless intentional)## Expected outputStructured report:- Screenshots/GIFs of issues- List of console + network errors with source location- Recommendations sorted by severity- Overall verdict: `OK` / `Warnings` / `Errors`## See also- `chrome-devtools-mcp` (vendor MCP server, programmatic layer) — `docs/recipes/recommended-vendor-skills.md`- `qa-design` skill — UI/UX heuristics + responsive/breakpoint testing complement- `wcag-audit` — accessibility gate when contrast/readability issues surface- Audit pilot trace: `specs/marketplace-audit/qa-skills-pilot-2026-05-06.md`

Frequently asked questions