Use whenever you need to verify UI changes in the browser, run regression tests on critical flows (cart, checkout, blog), take screenshots for proof, or interact with web pages programmatically. This skill leverages the `agent-browser` CLI. Always use this when the user asks to 'verify in the browser', 'check the page', 'test the flow', 'take a screenshot', or whenever a code change should be visually confirmed. Also use for reading external docs or checking competitor pages.
The agent-browser CLI must be installed before use. If it's not available, run:
agent-browser install
Verify installation with agent-browser --version. If the command is not found, ask the user to install it first.
Use this skill for:
Start/Ensure Local Dev Server
pnpm dev is running (usually on http://localhost:3000).Initialize Browser Session
agent-browser open <url>http://localhost:3000 for local testing.Explore and Interact
agent-browser snapshot -i to see the accessibility tree with refs (@e1, @e2, etc.).agent-browser click @ref to interact with elements.agent-browser type @ref "text" to fill forms.agent-browser scroll down or agent-browser scroll up.Verify and Assert
agent-browser screenshot path/to/image.png for visual proof.Clean up
agent-browser close to terminate the session and free resources.agent-browser open http://localhost:3000/lightersagent-browser snapshot -i (Find "Add to Cart" button ref)agent-browser click @refagent-browser open http://localhost:3000/cartagent-browser snapshot -i (Verify item is in cart)agent-browser open http://localhost:3000/blogagent-browser snapshot -i (Find a blog post link ref)agent-browser click @refagent-browser snapshot -i (Confirm content renders correctly)snapshot -i to get the compact accessibility tree instead of full DOM.agent-browser install (done by user).