ds-visual-review

Capture runtime browser evidence to identify and fix visual regressions on live websites.

Updated Apr 27, 2026
One-click install
npx skills add https://github.com/Conradmaker/copilot-cockpit --skill ds-visual-review
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ds-visual-review
Source: https://github.com/Conradmaker/copilot-cockpit/tree/main/.github/skills/ds-visual-review
Command: npx skills add https://github.com/Conradmaker/copilot-cockpit --skill ds-visual-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Real-time visual validation of web interfaces by capturing browser evidence and guiding fixes in live sessions.

Core Features & Use Cases

  • Real-time inspection with runtime evidence (screenshots, DOM readouts, viewports)
  • Framework-specific fixes (CSS/Tailwind/styled-components) applied and verified
  • Re-verification loop with before/after comparison and reporting

Quick Start

Open a target URL in a browser and start the visual inspection workflow to capture evidence, apply fixes, and re-verify until issues pass.

Frequently Asked Questions about ds-visual-review

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

FAQPage Schema
How do I identify and fix visual regressions on a live website?

Visual regressions are identified by capturing runtime browser evidence like screenshots and DOM readouts. An inspection-driven workflow applies framework-specific fixes to the live website and runs a re-verification loop to ensure the layout checks pass.

How do I perform responsive testing and accessibility checks across different viewports?

Responsive testing and accessibility checks across desktop and mobile viewports are performed using browser automation tooling to capture runtime evidence. This inspection-driven workflow identifies visual issues and guides framework-specific fixes.

What's the best way to verify CSS or Tailwind fixes without manual screenshot comparison?

The best way to verify CSS or Tailwind fixes without manual comparison is an automated re-verification loop. This process captures before and after runtime browser evidence, applying framework-specific fixes and generating a report to ensure issues pass.

Do I need browser automation tooling to run UI debugging workflows?

Yes, browser automation tooling is required to run UI debugging workflows. It enforces an inspection-driven process by capturing live runtime evidence such as DOM readouts and screenshots across desktop and mobile viewports.

Can I apply styled-components fixes and re-verify them in the same session?

Yes, you can apply styled-components fixes and re-verify them in the same session. The visual inspection workflow captures initial evidence, applies the framework-specific fixes, and runs a re-verification loop with before and after comparison.

Why does my visual review workflow lack evidence for layout checks?

Your visual review lacks evidence because it does not capture runtime browser data like DOM readouts and screenshots. Enforcing an inspection-driven workflow ensures layout checks are backed by captured evidence across desktop and mobile viewports.