Vibe Coding Rules · AI Programming Discipline

Problem

When AI helps with frontend development, runnable code is not the same as a usable page. Engineers often need stable acceptance checks after component changes: did the page render, are key DOM elements present, are there JS runtime errors, do modals and forms behave correctly, and is copy shown in the right language? Vibe Coding Rules · AI Programming Discipline turns these checks into explicit, executable rules to reduce informal agreements and missed validation.

How It Works

The skill focuses on web automated testing. Key capabilities include:

• Triggering after code self-checks pass, when asked to test / verify page, when confirming UI rendering, or during screenshot regression testing.
• Reading {{pipeline.project.testUrl}}, {{pipeline.project.testPagePath}}, and {{pipeline.paths.tests}} from pipeline.json.
• Using Playwright for browser interaction and DOM assertions, with a fast Smoke Test for page load, key elements, and no JS runtime errors.
• Running a Full Test after major changes: interaction flows, form submissions, modals/overlays, async data loading, and screenshot comparison.
• Optionally using tesseract.js for OCR Verification of screenshot text, key copy, and multilingual content.

The workflow generally checks dependencies, creates test scripts, executes tests, and reports pass/fail counts with failed screenshots and reasons.

Boundaries

It is best for frontend page and UI behavior verification, not a replacement for full backend testing. If the test URL, test path, or dependencies are missing, pipeline.json and the local environment must be prepared first. OCR is optional and depends on tesseract.js.