skills.rest
lucasfcosta
lucasfcostaCOMMUNITY
Explore all skills by this author →
Website𝕏@thewizardlucasGitHub

visual-review

Compare rendered UI against Figma or ticket references to detect visual defects.

62|2|Updated May 29, 2026
Search Tags:#typography#ui#layout#playwright#visual-regression#visual-review#design-reference
One-click install
npx skills add https://github.com/lucasfcosta/backpressured --skill visual-review-lucasfcosta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-review
Source: https://github.com/lucasfcosta/backpressured/tree/main/skills/visual-review
Command: npx skills add https://github.com/lucasfcosta/backpressured --skill visual-review-lucasfcosta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual changes in front-end UI often bypass automated linting and tests, leading to subtle layout, spacing, color, and typography defects that degrade user experience. This Skill provides a structured, region-by-region visual review by comparing the rendered UI against a design reference (Figma frame or Linear ticket images) to detect and report those defects before release.

Core Features & Use Cases

  • Region-by-region comparison against design references to detect visual discrepancies.
  • Capture current UI with Playwright MCP, including full-page and per-element screenshots for precise measurements.
  • Retrieve and treat Figma references or ticket images as the source of truth, with Figma as authoritative when both exist.
  • Step-by-step evaluation: layout, spacing, alignment, typography, color/contrast, component completeness, interactive states, and responsive behavior.
  • Use Case: per-iteration UI changes and pre-release verification to ensure visuals align with the design before shipping.

Quick Start

Run the visual-review process against your updated UI and its design reference to perform a region-by-region visual audit.

Frequently Asked Questions about visual-review

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

FAQPage Schema
How do I automate UI visual regression testing against Figma design references?▼

Automate UI visual regression testing by capturing rendered UI screenshots with Playwright and comparing them region-by-region against Figma frames to detect layout, spacing, and typography defects before release.

What is visual review in front-end development and when do I need it?▼

Visual review is a structured region-by-region comparison of rendered UI against design references to detect subtle visual defects. You need it during per-iteration UI changes and pre-release verification to ensure visuals align with the design.

Can I use Playwright to capture per-element screenshots for layout verification?▼

Yes, you can use Playwright to capture both full-page and per-element screenshots for precise measurements. These captures are then evaluated step-by-step against authoritative design references for layout, spacing, and alignment verification.

Does visual review work with both Figma frames and Linear ticket images?▼

Visual review works with both Figma frames and Linear ticket images, treating them as design references. When both exist, Figma references are treated as the authoritative source of truth for the visual comparison.

What's the best way to check responsive UI behavior across different viewports?▼

The best way to check responsive UI behavior is by performing regional and viewport checks using Playwright captures, evaluating component completeness, interactive states, and responsive behavior step-by-step against the design reference.

Why do subtle visual defects bypass automated tests and how are they caught?▼

Subtle visual defects bypass automated linting and tests because they involve layout, spacing, color, and typography discrepancies. They are caught by comparing rendered UI against design references region-by-region with error reporting and severity tagging.

Related Skills

Explore More Design & Creative Skills→
michalklabnikmichalklabnik

test-deployment

Verifies deployed web servers by checking HTTP 200 status and UI elements via screenshots.

Community
Intermediate
seokan-jeongseokan-jeong
8

team-shinchan:design-review

Detect discrepancies between design mockups and implemented UI by category.

Community
Intermediate
serkan-ozalserkan-ozal
7

visual-testing

Detect visual discrepancies between live pages and Figma design references.

Community
Intermediate
SeoJaeWanSeoJaeWan
1

visual-compare

Compare reference and current UI renderings with pixel-level diff reports.

Community
Intermediate