ui

Automates visual regression testing via browser capture and critic evaluation.

45|2|Updated Apr 24, 2026
One-click install
npx skills add https://github.com/hachej/boring-ui --skill ui-hachej
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/hachej/boring-ui/tree/main/.agents/skills/ui
Command: npx skills add https://github.com/hachej/boring-ui --skill ui-hachej

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, playwright-core, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the challenge of maintaining consistent UI quality by automating the capture, packaging, and critical review of visual evidence for frontend components and application states.

Core Features & Use Cases

  • Visual Evidence Packaging: Automatically captures screenshots, videos, and console logs for specific UI scenarios to create a comprehensive report bundle.
  • Deterministic Review Loop: Orchestrates a structured workflow involving an L0 operator for capture and an L1 critic for grading, ensuring UI changes are validated against registered specifications.
  • Use Case: When a developer pushes a change to a dashboard component, this skill can be triggered to run a smoke test, capture the visual state, and provide a report for the reviewer to approve or reject based on hard-gate assertions.

Quick Start

Use the ui skill to run a visual review for the registered scenario associated with issue 913.

Frequently Asked Questions about ui

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

FAQPage Schema
How do I automate visual regression testing for frontend components?

Automated visual regression testing captures screenshots, videos, and console logs for specific UI scenarios to create a comprehensive report bundle. This structured workflow validates UI changes against registered specifications through a deterministic operator-critic review loop.

What is a deterministic review loop for UI state verification?

A deterministic review loop orchestrates a structured workflow where an L0 operator captures browser-based visual evidence and an L1 critic grades it. This ensures UI state consistency by validating component behavior against hard-gate assertions.

Do I need Playwright to run automated UI capture and review?

Yes, Playwright is required for browser automation to capture screenshots and videos. You also need a Pi-compatible orchestrator to manage the operator-critic-executor loop that handles the visual evidence packaging and critical evaluation.

Can I use this visual review workflow for frontend smoke testing?

Yes, you can trigger a visual review to run a smoke test on dashboard components. It captures the visual state, packages the evidence with console logs, and provides a report for reviewers to approve or reject based on registered specifications.

What's the best way to package visual evidence for UI quality assurance?

The best way to package visual evidence is automating the capture of screenshots, videos, and console logs for specific UI scenarios. This creates a comprehensive report bundle validated through a structured operator-critic evaluation loop.