zeka ui evidence

Manual UI verification is slow and prone to subjective error. This skill generates local, revision-aware visual evidence for Angular component changes, ensuring every layout fix or redesign is backed by technical proof. It automates the capture of before and after states to validate specific assertions like responsive overflow fixes or accessibility improvements.

What it does

• Visual comparison generates matched evidence for UI changes across mobile, tablet, and desktop viewports.
• Assertion tracking links every capture to a specific claim, such as fixing element overflows or component alignment.
• Revision anchoring verifies source SHAs for each capture to ensure evidence matches the specific code deployment.
• Safe data handling prevents the capture of PII or sensitive administrative data by enforcing controlled synthetic test environments.
• Artifact packaging bundles captures, selectors, and metadata into a local runtime directory for review.

How it works

1. Target Identification: Provide the target URL, component selector, and the specific assertion you need to prove.
2. Viewport Setup: Define the required device profiles (375px mobile, 768px tablet, etc.) for the comparison.
3. Capture Execution: The skill triggers the local browser or capture tool to grab states based on the defined selectors.
4. Metadata Verification: It records timestamps, tool versions, and source SHAs to ensure the evidence is immutable.
5. Review Generation: It outputs a Markdown summary ready for PR inclusion without modifying your repository.

Frameworks & tools

Optimized for Angular environments using browser-based capture tools. Works with Python-based helpers for packaging and integrates with zeka-evidence-gate for validation.

Why this beats prompting it yourself

Generic prompts often lead to messy screenshots containing system notifications or PII. This skill enforces strict revision-tracking and metadata collection, turning a simple image into verifiable technical evidence.

Use cases

• Validating CSS overflow fixes on specific mobile breakpoints.
• Documenting component UI refactors for design system compliance.
• Proving accessibility state changes for screen readers or high-contrast modes.
• Capturing visual regressions across different deployment environments.

Known limitations

Does not prove backend logic or database state. Requires an existing browser-automation tool or browser skill to be available in the environment. Cannot manufacture a "before" state if the source URL or branch is unavailable.