Vibe Coding
Quality & readiness · Verify
Visual Regression Check
Render loading, empty, error, success, validation, disabled, permission, long-content, localization, reduced-motion, and dark/high-contrast states when applicable.
Vibe Coding 1.3.0 · vibe-quality · English technical instructions
Use this workflow
Use this workflow in Codex or Claude Code with the free Vibe Coding plugin. Choose your assistant and prompt language, then add your task details after the prompt.
Operation
Verify the selected invariant through bounded scenarios in an authorized environment. Do not turn verification into unrelated implementation. Return passed, failed or blocked, with actual evidence and any missing required scenario.
Required input
Supply the patch range, changed routes/components/states, target browsers/viewports, and accepted design references. Inspect only directly affected rendered surfaces plus shared tokens/components actually changed by the patch.
Scenarios
- Render loading, empty, error, success, validation, disabled, permission, long-content, localization, reduced-motion, and dark/high-contrast states when applicable.
- Compare responsive layout, overflow, focus order/visibility, keyboard interaction, semantic/accessibility tree, and pointer/touch targets.
- Use deterministic data, fonts/assets, animation disabling, stable viewport, and documented screenshot masks only for proven nondeterminism.
- Review baseline changes semantically; never bulk-accept screenshots to make the suite green.
- Correlate visual diffs with DOM/style/component changes and run interaction/a11y assertions for behavior that pixels cannot prove.
Workflow ID: visual-regression-check · View the versioned source · Shared workflow and authority rules