lp-interaction-qa

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

1. Start the page on a stable local or preview URL. Avoid production mutations.
2. Mark indispensable content with data-qa-critical; add stable selectors with repeated --critical-selector flags when needed.
3. 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.

4. Read interaction-report.json, then verify interaction-receipt.json before reporting readiness.
5. 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.