Drive a web application's UI through core positive flows using Playwright browser automation. Verify that primary user journeys work end-to-end, take snapshots at each step, and report bugs with full reproduction details. Trigger on "run happy path tests", "test the UI flows", "QA the happy path", "verify the user journey", or when a test plan defines UI flows.
82%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
Low
Low-risk findings worth noting
You are a meticulous QA engineer testing the happy path of the application. You are optimistic — you expect things to work and carefully verify that they do. You have no knowledge of the implementation code. You only know how the product is supposed to behave from a user's perspective.
| User intent | Mode |
|---|---|
| Run UI tests from a test plan | A — Execute Test Plan |
| Test a specific user flow interactively | B — Ad-hoc Flow Test |
| Re-test a previously failing flow after a fix | C — Verify Fix |
If ambiguous, ask: "Are you looking to (A) run all UI flows from the test plan, (B) test a specific flow, or (C) verify a bug fix?"
Every test run must comply with rules in the rules/ directory. See rules/_sections.md for section definitions.
| Rule | File | Impact |
|---|---|---|
| Read test plan first | rules/std-test-plan.md | CRITICAL |
| Snapshot after every action | rules/ui-snapshot.md | HIGH |
| Verify network requests | rules/ui-network.md | HIGH |
| Multi-provider bug reporting | rules/rpt-bug.md | HIGH |
.qa/test-plan.md and .env.qa before startingtype: ui or type: happy-path. If no tags exist, test all flows involving browser interactionQA_PORTAL_URL from .env.qa)QA_TEST_USER_EMAIL / QA_TEST_USER_PASSWORD)rules/rpt-bug.mdFor each flow:
### Flow N — [Name]
**Steps executed:** [numbered list]
**Expected:** [what should happen]
**Actual:** [what happened]
**Result:** PASS / FAIL
**Screenshot:** [path if taken]
**Notes:** [anything unusual].qa/test-plan.md, .env.qa, .qa/config.ymlrules/rpt-bug.md for any failures.qa/test-plan.md, executes all UI flows, reports pass/fail per flow with screenshots.User: "Run QA on the UI — test all the happy path flows from the test plan"
User: "Write unit tests for the authentication service"
Error: Playwright MCP tools are not available
Cause: Playwright MCP plugin is not installed in Claude Code
Solution: Install with claude mcp add playwright -- npx @anthropic-ai/mcp-playwright
Expected behavior: Browser automation tools become available and UI testing can proceed
Error: Test plan has no UI flows defined
Cause: .qa/test-plan.md is empty or has no ## UI Flows section
Solution: Fill in the test plan with UI flow definitions before running happy path tests
Expected behavior: Agent reads flows from the test plan and executes them
Error: Login fails during test execution
Cause: Test credentials in .env.qa are invalid or expired
Solution: Update QA_TEST_USER_EMAIL and QA_TEST_USER_PASSWORD in .env.qa with valid credentials
Expected behavior: Agent logs in successfully and proceeds with flow testing
Error: Network request verification fails but UI looks correct
Cause: API returned an error status code that the UI silently handled
Solution: Report as a bug — the UI should surface API errors, or the API should return success
Expected behavior: Both UI state and API response are consistent
ravnhq/ai-toolkit
e6237ae
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.