← ClaudeAtlas

browser-qalisted

Check a web page or the pages this branch changed in a real browser at mobile, tablet, and desktop widths, and report what is off
svyatov/agent-toolkit · ★ 0 · Web & Frontend · score 78
Install: claude install-skill svyatov/agent-toolkit
# Browser QA Look at the page the way a user would, at three widths, and report what a screenshot shows that the code review did not. Fix only when asked. ## Step 1: What to look at $ARGUMENTS names a URL or a path. Empty means: map the files this branch changed (uncommitted plus commits since the default branch) to the routes that render them, and check those. No web files changed: say so and stop. A trailing `fix` in the arguments switches on Step 4. ## Step 2: A running server `curl -sI` the base URL. Nothing answers: find the dev command in package.json scripts, Procfile, bin/dev, or the README, start it in the background, and wait until the URL answers. Report the command you used. Do not start a second server when one is already listening on the port. ## Step 3: Look Load the browser tools once, in one `ToolSearch` call, whichever set is installed: Claude in Chrome (`mcp__claude-in-chrome__*`) or Chrome DevTools MCP (`mcp__chrome-devtools__*` when added with `claude mcp add`, `mcp__plugin_chrome-devtools-mcp_chrome-devtools__*` when installed as the plugin). A host without `ToolSearch`: use whatever browser MCP server it exposes; none configured means say so and stop. Open a new tab; do not reuse the user's tabs. For every page, at 375, 768, and 1280 px wide: 1. Set the width (`resize_window` or `resize_page`; with Chrome DevTools MCP prefer `emulate` with `viewport: "375x812x2,mobile,touch"` for the 375 width so tap targets behave as on a phone), naviga