web-regression-governance

Block HTML/CSS/JS visual regressions in web-static and web-app repositories.

Updated Apr 11, 2026

Search Tags:#html #governance #ci #visual-testing #dom #web-regression

Ready to run

npx skills add https://github.com/chf3198/devenv-ops --skill web-regression-governance

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-regression-governance
Source: https://github.com/chf3198/devenv-ops/tree/main/skills/web-regression-governance
Command: npx skills add https://github.com/chf3198/devenv-ops --skill web-regression-governance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Website-static and web-app projects often drift visually and functionally as code changes, risking broken layouts and degraded user experiences. This skill provides enforceable governance to detect and block such regressions before shipping.

Core Features & Use Cases

Non-bypass visual/DOM/regression checks integrated into CI and PR pipelines.
Route-specific invariants enforcement for homepage and key routes.
Evidence collection (screenshots and assertion outputs) for traceability and audit trails.
Use Case: prevent homepage layout drift after CSS updates or JS DOM mutations by failing builds on invariant violations.

Quick Start

Run checks on pull requests to automatically fail if visual regressions are detected.

Frequently Asked Questions about web-regression-governance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I block visual regressions in web apps during CI pipelines?▼

To block visual regressions in web apps, you enforce non-bypass visual and DOM checks within CI pipelines that hard-fail on drift. This governance requires before and after evidence, such as screenshots and assertion outputs, to prevent layout changes from shipping.

What is DOM regression governance for web static sites?▼

DOM regression governance is an enforceable process that detects and blocks HTML, CSS, and JS visual regressions in web-static repositories. It maintains layout, visibility, and runtime rendering stability across releases by failing builds when route-specific invariants are violated.

How do I prevent homepage layout drift after CSS updates?▼

You prevent homepage layout drift by enforcing route-specific invariants that hard-fail CI pipelines on visual changes. The system collects before and after screenshots as evidence, ensuring any CSS updates or JS DOM mutations that break layout stability are automatically blocked.

Does visual regression governance work with existing pull request pipelines?▼

Yes, visual regression governance integrates directly into pull request pipelines to automatically fail builds if regressions are detected. It applies runtime verification and CI visual checks to key-route scenarios, blocking any code changes that cause layout or visibility drift.

How do I collect evidence for UI changes in continuous integration?▼

You collect evidence for UI changes by enforcing runtime verification that captures screenshots and assertion outputs during CI checks. This creates a traceability audit trail for before and after states, ensuring any visual drift or DOM mutation is documented before release.