Visual QA
Use this skill after making UI changes to visually verify the result, catch console errors, and audit network requests — all without leaving Cursor.
How It Works
Cursor has a built-in browser (cursor-ide-browser MCP) that can navigate to URLs, take screenshots, read console messages, inspect network requests, and interact with page elements. This skill uses those tools to do a quick visual QA pass.
Steps
Ensure the dev server is running — check if there's already a terminal running the dev server. If not, start one in the background:
npm run dev
Wait for the server to be ready (watch for the "ready" or localhost URL in the output).
Navigate to the page — use browser_navigate to open the relevant page:
Tool: browser_navigate
Arguments: { "url": "http://localhost:3000", "take_screenshot_afterwards": true }
If the change is on a specific route, navigate directly to it (e.g., /settings, /dashboard).
Take a screenshot — capture the current state:
Tool: browser_take_screenshot
Arguments: { "fullPage": true }
Review the screenshot for visual issues: layout breaks, missing content, wrong colors, misaligned elements.
Check console for errors — look for JavaScript errors or warnings:
Tool: browser_console_messages
Report any errors, especially TypeError, ReferenceError, failed imports, or React hydration mismatches.
Audit network requests — check for failed API calls or unexpected requests:
Tool: browser_network_requests
Look for: 4xx/5xx status codes, CORS errors, excessively large responses, unnecessary duplicate requests.
Interact if needed — if the change involves interactive elements (buttons, forms, modals), use browser_click, browser_fill, or browser_hover to test the interaction, then take another screenshot to verify.
Report findings — summarize:
- Screenshot shows the UI looks correct (or what's wrong)
- Console is clean (or list errors found)
- Network requests are healthy (or list failures)
Notes
- Always use
browser_snapshot before clicking elements to get the correct element refs.
- For responsive testing, use
browser_resize to check different viewport sizes.
- Use
browser_navigate with position: "side" to open the browser beside your code.
1---2name: visual-qa-testing3description: Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests. Use after making UI changes to verify they look correct.4---5
6# Visual QA
7
8Use this skill after making UI changes to visually verify the result, catch console errors, and audit network requests — all without leaving Cursor.
9
10## How It Works
11
12Cursor has a built-in browser (`cursor-ide-browser` MCP) that can navigate to URLs, take screenshots, read console messages, inspect network requests, and interact with page elements. This skill uses those tools to do a quick visual QA pass.
13
14## Steps
15
161. **Ensure the dev server is running** — check if there's already a terminal running the dev server. If not, start one in the background:
17
18 ```bash
19 npm run dev
20 ```
21
22 Wait for the server to be ready (watch for the "ready" or localhost URL in the output).
23
242. **Navigate to the page** — use `browser_navigate` to open the relevant page:
25
26 ```
27 Tool: browser_navigate
28 Arguments: { "url": "http://localhost:3000", "take_screenshot_afterwards": true }
29 ```
30
31 If the change is on a specific route, navigate directly to it (e.g., `/settings`, `/dashboard`).
32
333. **Take a screenshot** — capture the current state:
34
35 ```
36 Tool: browser_take_screenshot
37 Arguments: { "fullPage": true }
38 ```
39
40 Review the screenshot for visual issues: layout breaks, missing content, wrong colors, misaligned elements.
41
424. **Check console for errors** — look for JavaScript errors or warnings:
43
44 ```
45 Tool: browser_console_messages
46 ```
47
48 Report any errors, especially `TypeError`, `ReferenceError`, failed imports, or React hydration mismatches.
49
505. **Audit network requests** — check for failed API calls or unexpected requests:
51
52 ```
53 Tool: browser_network_requests
54 ```
55
56 Look for: 4xx/5xx status codes, CORS errors, excessively large responses, unnecessary duplicate requests.
57
586. **Interact if needed** — if the change involves interactive elements (buttons, forms, modals), use `browser_click`, `browser_fill`, or `browser_hover` to test the interaction, then take another screenshot to verify.
59
607. **Report findings** — summarize:
61 - Screenshot shows the UI looks correct (or what's wrong)
62 - Console is clean (or list errors found)
63 - Network requests are healthy (or list failures)
64
65## Notes
66
67- Always use `browser_snapshot` before clicking elements to get the correct element refs.
68- For responsive testing, use `browser_resize` to check different viewport sizes.
69- Use `browser_navigate` with `position: "side"` to open the browser beside your code.
spencerpauly