Inventory and validate user-facing browser workflows with click-path evidence, accessible controls, Playwright coverage, console/network checks, and lifecycle verification. Use for UI work, web regressions, shadcn/ui changes, todo-style create/edit/delete flows, or browser acceptance testing.
Installs into .claude/skills of the current project.
Are you the author of Click Path And Browser Qa?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/pax-k-click-path-and-browser-qa)
---
name: click-path-and-browser-qa
description: Inventory and validate user-facing browser workflows with click-path evidence, accessible controls, Playwright coverage, console/network checks, and lifecycle verification. Use for UI work, web regressions, shadcn/ui changes, todo-style create/edit/delete flows, or browser acceptance testing.
---
# Click Path And Browser QA
## Purpose
Make browser-facing behavior testable by mapping important user paths to controls, routes, expected state changes, and verification evidence.
## Inspect First
- app routes, pages, components, forms, buttons, links, dialogs, and Playwright tests
- `docs/development/ui.md`, observability/debugging docs, and existing browser QA reports
- local runtime scripts and healthcheck commands
## Procedure
1. Inventory click paths.
- Run `scripts/inventory_click_paths.py <repo> --json` when available.
- Identify routes, forms, buttons, links, and missing accessible names.
- Prioritize create/edit/delete/filter or equivalent user lifecycles.
- Add `scripts/click-path-audit` when UI surfaces are part of the repo validation contract.
2. Define browser evidence.
- Use `assets/templates/click-path-audit.md.tmpl` or `browser-qa-report.md.tmpl`.
- Map each path to expected state, data persistence, error handling, and validation command.
3. Validate with the right tool.
- Prefer Playwright for repeatable lifecycle checks.
- Use `$chrome-devtools-runtime-debugger` for console, network, DOM, performance, or accessibility investigation.
- Use `$tdd-playwright-workflow` when fixing a bug with a failing browser reproduction first.
4. Record gaps.
- Missing e2e coverage, inaccessible icon-only controls, untested destructive actions, and console errors should become review findings or follow-up tasks.
- When trajectory tracing exists, record UI and browser-evidence risk surfaces so `$trajectory-risk-supervisor` can distinguish tested from untested UI work.
## Validation
- Run the narrow Playwright/browser command when available.
- Run `./scripts/click-path-audit` when the wrapper exists.
- Confirm key controls have accessible names.
- Confirm browser findings include route, action, expected result, actual result, and evidence.
## Completion Criteria
- Critical user paths are inventoried and have browser or Playwright evidence.
- UI workflow gaps are documented with concrete follow-up commands.