qa-flow-report

Produce a screenshot-backed HTML report from a manual UI walkthrough driven through chrome-devtools MCP tools. The output is a single report.html next to its screenshots/ and manifest.json, openable in a browser, and suitable to attach to a PR as evidence.

This skill is intentionally ad-hoc visual evidence. It complements — does not replace — an automated test suite (Playwright, Cypress, Storybook interactions, etc.). Use the automated suite to assert behavior in CI; use this skill to produce a one-off human-readable artifact that a flow works end-to-end.

Preconditions

Before driving the flow:

Target URL is reachable. Confirm with the user which surface is being QA'd and that the dev server (or staging URL) is up. If the project has a CLAUDE.md, check it for known dev-server ports, fixture URLs, and any query-param shortcuts before guessing.
chrome-devtools MCP tools are available. The mcp__chrome-devtools__* tools are deferred — call ToolSearch with query: "select:mcp__chrome-devtools__navigate_page,mcp__chrome-devtools__take_screenshot,mcp__chrome-devtools__take_snapshot,mcp__chrome-devtools__click,mcp__chrome-devtools__fill,mcp__chrome-devtools__wait_for,mcp__chrome-devtools__list_console_messages,mcp__chrome-devtools__list_network_requests,mcp__chrome-devtools__resize_page,mcp__chrome-devtools__new_page" to load schemas. Add others (hover, press_key, evaluate_script, handle_dialog, fill_form, select_page) as the flow requires.
Output location won't dirty the repo. Default output dir is tmp/qa-reports/<slug>-<timestamp>/ at the repo root. Verify tmp/ is gitignored before writing there. If it isn't, surface that as a separate fix and ask the user where to put the artifact instead of silently editing .gitignore.

Workflow

1. Plan the flow

Before driving, write down the steps as a numbered list (e.g. "1. land on /signin, 2. enter email, 3. submit code, 4. expect dashboard, 5. open settings"). Mirror them in TaskCreate so progress shows in the UI.