click-path-and-browser-qa
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 regres
SKILL.mdskills/click-path-and-browser-qa/SKILL.md
GitHubClick 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
Inventory click paths.
- Run
scripts/inventory_click_paths.py <repo> --jsonwhen available. - Identify routes, forms, buttons, links, and missing accessible names.
- Prioritize create/edit/delete/filter or equivalent user lifecycles.
- Add
scripts/click-path-auditwhen UI surfaces are part of the repo validation contract.
- Run
Define browser evidence.
- Use
assets/templates/click-path-audit.md.tmplorbrowser-qa-report.md.tmpl. - Map each path to expected state, data persistence, error handling, and validation command.
- Use
Validate with the right tool.
- Prefer Playwright for repeatable lifecycle checks.
- Use
$chrome-devtools-runtime-debuggerfor console, network, DOM, performance, or accessibility investigation. - Use
$tdd-playwright-workflowwhen fixing a bug with a failing browser reproduction first.
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-supervisorcan distinguish tested from untested UI work.
Validation
- Run the narrow Playwright/browser command when available.
- Run
./scripts/click-path-auditwhen 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.