| name | lp-interaction-qa |
| description | Audit landing pages for functional production readiness after visual implementation. Use with mockup-to-code or any LP build when verifying links and CTAs, fragment navigation, forms, keyboard Tab/Enter behavior, visible focus, reduced-motion behavior, JavaScript-disabled access, and critical-content visibility; emit deterministic interaction-report/v1 evidence and a SHA-256 receipt. Do not use for pixel, box, spacing, or screenshot-fidelity QA. |
LP Interaction QA
Treat interaction readiness as a separate gate from visual fidelity. Never infer a pass from appearance.
Run the gate
- Start the page on a stable local or preview URL. Avoid production mutations.
- Mark indispensable content with
data-qa-critical; add stable selectors with repeated --critical-selector flags when needed.
- Run:
SKILL_ROOT="${SKILL_ROOT:-${CODEX_HOME:-$HOME/.codex}/skills}"
node "$SKILL_ROOT/lp-interaction-qa/scripts/check_lp_interactions.mjs" \
--url http://127.0.0.1:3000/ \
--out-dir artifacts/lp-interaction-qa \
--parent-root . \
--playwright-core "$SKILL_ROOT/mockup-to-code/node_modules/playwright-core" \
--critical-selector '[data-qa-critical]'
When the pack was installed with a non-default --dest, set SKILL_ROOT to
that destination before running the command.
- Read
interaction-report.json, then verify interaction-receipt.json before reporting readiness.
- Fix errors and rerun against the same URL. Preserve reports when the user needs before/after evidence.
The checker uses playwright-core resolved from the working project, an explicit --playwright-core path, or LP_INTERACTION_QA_PLAYWRIGHT_CORE. It tries an installed Chromium/Chrome executable. If no usable browser exists, it performs a conservative source audit, records mode: "degraded-static", and forces status: "blocked"; never promote that result to pass.
Interpret the result
pass: browser checks completed in normal, reduced-motion, and JavaScript-disabled states with no error findings.fail: browser checks completed and found production-blocking interaction defects.blocked: the required browser/state evidence could not be completed. Static findings remain actionable but incomplete.
Treat warnings, including feasible hover-affordance heuristics, as review items. Inspect false positives in context; do not weaken unrelated checks to silence them.
The checker covers invalid/placeholder links, missing fragments, suspicious hover affordances on noninteractive elements, form action/name/submit defects, Tab reachability, Enter activation, focus visibility, and critical visibility across states. It does not assess pixel matching, geometry, spacing, typography fidelity, animation polish, or general visual quality.
Contracts
- Validate reports against interaction-report-v1.schema.json.
- Use interaction-report.blocked.json only as a valid blocked starter, never as evidence from a run.
- Require the receipt's manifest and report hashes to match the emitted files. A changed manifest or report invalidates the receipt.
- Copy
interaction-receipt.json.specialistReport to specialistReports.interaction; it is already rooted and hash-bound by --parent-root.
- Use
schemaVersion for manifest, report, and receipt contract identifiers; do not emit the legacy schema key.
- Keep
status, mode, findings, and blocked reasons factual. Do not self-approve incomplete browser coverage.
For checker options, run node scripts/check_lp_interactions.mjs --help. Run focused regression tests with node tests/run_fixture_tests.mjs after changing this skill.
