visual-adjust

Name: visual-adjust
Availability: InStock
Author: ksleungac

Compare rendered UI screenshots against ground-truth references to identify layout discrepancies.

17|3|Updated Mar 1, 2026

Search Tags:#ui #layout #reference #visual-testing #ground-truth #pixel-accurate #pygame

Ready to run

npx skills add https://github.com/ksleungac/pids-jre-simulator --skill visual-adjust

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-adjust
Source: https://github.com/ksleungac/pids-jre-simulator/tree/main/.claude/skills/visual-adjust
Command: npx skills add https://github.com/ksleungac/pids-jre-simulator --skill visual-adjust

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visually iterate on UI layouts by comparing rendered screenshots against ground-truth references, helping teams achieve pixel-perfect alignment faster.

Core Features & Use Cases

Side-by-side and composite comparison workflows to validate layout accuracy across fonts and display modes.
Step-by-step guidance for identifying discrepancies in font size, spacing, alignment, and color rendering.
Use Case: A designer adjusts the upper and lower LCD rendering to match a reference photo for a new UI skin.

Quick Start

Run the reference comparison workflow to align the UI rendering with the ground-truth screenshot.

Frequently Asked Questions about visual-adjust

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

FAQPage Schema

How do I compare rendered UI output against a ground-truth reference image?▼

Identifying UI layout discrepancies requires comparing rendered screenshots against ground-truth references using configurable layout parameters. This process highlights differences in font size, spacing, alignment, and color rendering during iterative design and debugging.

What do I need to debug pixel-accurate UI layout discrepancies?▼

Debugging pixel-accurate UI layout discrepancies requires access to the renderer code (such as upper_lcd.py), a ground-truth image, and a reproducible workflow. These elements generate comparisons with configurable layout parameters to validate alignment across display modes and font variants.

Can I use this approach to iterate on UI rendering for different font variants?▼

Yes, you can use this approach to iterate on UI rendering for different font variants. The workflow supports side-by-side and composite comparisons to validate layout accuracy and identify discrepancies across multiple display modes and font variants.

What's the best way to achieve pixel-perfect UI alignment against a reference photo?▼

The best way to achieve pixel-perfect UI alignment is to run the reference comparison workflow. This guides you step-by-step to identify and correct discrepancies in font size, spacing, alignment, and color rendering between the rendered output and the ground-truth screenshot.

Does visual layout comparison work with Pygame renderer code?▼

Yes, visual layout comparison works with Pygame renderer code. The workflow requires access to your renderer code (like upper_lcd.py) and a ground-truth image to generate comparisons and validate on-screen element alignment across different display modes.