Skip to main content
hc
Submit
commandsSource-backedReview first Safety ✓ Privacy ✓

/frontend-visual-qa - Chrome Design Verification Runbook

Community slash command runbook for frontend visual QA using documented Claude Code Chrome integration workflows: enable /chrome, open a local page, read console messages, and follow the design verification checklist from the Chrome integration guide.

by kiannidev·added 2026-06-16·
Claude Code
HarnessClaude Code
Invocation:/frontend-visual-qa <route-or-host>
Review first — review before installing

Open the source and read safety notes before installing.

Safety notes

  • Chrome integration runs in a visible browser with your logged-in session; avoid production admin flows.
  • Handle login pages and CAPTCHAs manually when the integration pauses.

Privacy notes

  • Console logs and screenshots may include staging data; redact before external sharing.

Prerequisites

  • Claude Code 2.0.73+ and Claude in Chrome extension 1.0.36+ on Chrome or Edge.
  • Local dev server reachable from the operator browser session.

Schema details

Install type
cli
Troubleshooting
No
Source repository stats
Scope
Source repo
Runtime and command metadata
Command syntax
/frontend-visual-qa <route-or-host>
Full copyable content
/frontend-visual-qa <route-or-host>

About this resource

Scope

This is a community custom entry you add under .claude/commands/ or .claude/hooks/. It is not a built-in Claude Code feature named on code.claude.com.

The /frontend-visual-qa runbook applies documented Chrome integration workflows from the Claude Code Chrome guide. It is a custom .claude/commands/ checklist, not a built-in command page.

Usage

/frontend-visual-qa <route-or-host>

Provide a host/path such as localhost:3000/dashboard that the operator opens after enabling Chrome integration.

What it does

When you invoke this command, follow these steps:

  1. Enable Chrome integration. Run /chrome (or start Claude Code with the documented --chrome flag) and confirm the extension is connected.
  2. Open the local app. Follow the guide's Test a local web application workflow: navigate to the dev server, interact with the changed UI, and observe whether expected behavior appears.
  3. Read console on load. Apply the Debug with console logs workflow: read console messages for errors when the page loads and filter to newly introduced failures.
  4. Run design verification. Use the guide's Design verification capability: compare the rendered UI against the intended change and note layout or asset regressions at desktop width.
  5. Record evidence only when asked. Capture a screenshot or GIF only if the operator requests shareable review artifacts.
  6. Return a merge checklist. Summarize pass/fail items, console findings, and blockers.

Output format

  • Chrome connection status and target route
  • Console errors/warnings with reproduction notes
  • Design verification pass/fail bullets
  • Primary user-flow pass/fail
  • Ship / fix / needs design review recommendation

Source Verification Notes

Verified against Claude Code Chrome documentation on 2026-06-16:

  • Chrome integration supports design verification — building a UI and opening it in the browser to verify it matches the intended design.
  • The guide documents testing a local web application by navigating to a dev server and interacting with forms or UI changes.
  • The Debug with console logs workflow reads browser console output to diagnose page-load problems.
  • Operators enable the integration with /chrome or the documented claude --chrome flag and can check connection status from /chrome.
  • Browser tasks run in a visible Chrome window; login pages and CAPTCHAs require manual operator action.

Duplicate Check

No existing command in content/commands/ documents this Chrome guide QA checklist.

#frontend#chrome#visual-qa#testing#slash-command

Source citations

Add this badge to your README

Show that /frontend-visual-qa - Chrome Design Verification Runbook is listed on HeyClaude. Paste this Markdown into your README — it renders the badge and links back to this page.

Listed on HeyClaude
[![Listed on HeyClaude](https://heyclau.de/badge/commands/frontend-visual-qa.svg)](https://heyclau.de/entry/commands/frontend-visual-qa)

How it compares

/frontend-visual-qa - Chrome Design Verification Runbook side by side with 3 alternatives on trust, install, platform support, and disclosed safety notes — all from reviewed registry metadata.

Field/frontend-visual-qa - Chrome Design Verification Runbook

Community slash command runbook for frontend visual QA using documented Claude Code Chrome integration workflows: enable /chrome, open a local page, read console messages, and follow the design verification checklist from the Chrome integration guide.

Open dossier 		Claude Code Chrome Browser QA Capability Pack Skill

Expert Claude Code Chrome browser QA capability pack applying documented Claude in Chrome enablement, browser automation boundaries, and web QA checkpoint workflows.

Open dossier 		/mcp-smoke-test - MCP Server Verification Runbook

Community slash command runbook for post-install MCP verification using only documented Claude Code MCP commands: claude mcp list, claude mcp get, and the /mcp panel for authentication status before exercising a read-only tool.

Open dossier 		/targeted-test-generation - Targeted Test Generation Runbook

Community slash command runbook for adding minimal automated tests around a changed module: inspect the git diff, mirror repository test conventions, and draft focused unit or integration tests using Anthropic develop-tests guidance.

Open dossier
Trust
Install riskReview firstReview firstReview firstReview first
Notes Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓ Safety ✓ Privacy ✓
Categorycommandsskillscommandscommands
Sourcesource-backedsource-backedsource-backedsource-backed
Authorkiannidevkiannidevkiannidevkiannidev
Added2026-06-162026-06-162026-06-162026-06-16
Platforms
Claude Code
Claude CodeCodexWindsurfGeminiCursorCLI
Claude Code
Claude Code
Source repo————
Safety notes✓Chrome integration runs in a visible browser with your logged-in session; avoid production admin flows. Handle login pages and CAPTCHAs manually when the integration pauses.✓Browser automation can access logged-in sessions—use staging accounts only. Claude chooses Chrome before computer use for web tasks when configured. Review permission prompts before approving navigation on sensitive pages.✓Prefer read-only tools during verification; avoid destructive MCP tools on production data. Remove failing servers from MCP config before sharing logs externally.✓Generated tests are drafts; run the project's test command locally before committing. Do not add network calls, production credentials, or destructive setup to proposed tests.
Privacy notes✓Console logs and screenshots may include staging data; redact before external sharing.✓Browser QA sends page content to the model—avoid customer PII in test flows. Screenshots and DOM snapshots may include session tokens in dev tools—close extras.✓MCP tool outputs may include repository paths; redact before posting publicly.✓Use synthetic fixtures only; do not copy production logs or customer records into tests.
Prerequisites
  • Claude Code 2.0.73+ and Claude in Chrome extension 1.0.36+ on Chrome or Edge.
  • Local dev server reachable from the operator browser session.
  • Claude in Chrome extension installed per official Chrome documentation.
  • Staging web app URL and test credentials scoped to non-production.
  • Team policy for browser automation on authenticated sessions.
  • Server already added with claude mcp add or present in project .mcp.json.
  • Non-production credentials when testing OAuth or remote MCP servers.
  • Git repository with an existing test runner configured in package scripts or docs.
  • A concrete code change or diff hunk to cover with new or updated tests.
Install
/frontend-visual-qa <route-or-host>
—
/mcp-smoke-test [server-name]
/targeted-test-generation <file-or-symbol>
Config————
Citations
ClaimUnclaimedUnclaimedUnclaimedUnclaimed

Signals

Loading live community signals…

More like this, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.